|
258 | 258 | background-color: var(--form-input-bg); |
259 | 259 | color: var(--text-primary); |
260 | 260 | } |
| 261 | + /* 在flex容器中,让form-input元素能正确收缩 */ |
| 262 | + .flex .form-input { |
| 263 | + flex: 1; |
| 264 | + min-width: 0; |
| 265 | + } |
| 266 | + /* 确保flex容器中的元素不换行 */ |
| 267 | + .flex { |
| 268 | + flex-wrap: nowrap; |
| 269 | + } |
| 270 | + /* 默认隐藏ID列,避免页面加载时闪动 */ |
| 271 | + th.col-id, |
| 272 | + td.col-id { |
| 273 | + display: none; |
| 274 | + } |
| 275 | + /* 统一的叉按钮样式 */ |
| 276 | + .close-btn { |
| 277 | + background: none; |
| 278 | + border: none; |
| 279 | + width: auto; |
| 280 | + height: auto; |
| 281 | + cursor: pointer; |
| 282 | + font-size: 1rem; |
| 283 | + line-height: 1; |
| 284 | + padding: 0.8px; |
| 285 | + opacity: 0.7; |
| 286 | + transition: opacity 0.2s, color 0.2s; |
| 287 | + color: var(--text-primary); |
| 288 | + margin-left: 8px; |
| 289 | + } |
| 290 | + .close-btn:hover { |
| 291 | + opacity: 1; |
| 292 | + color: #ef4444; |
| 293 | + } |
| 294 | + /* 统一的详情按钮样式 */ |
| 295 | + .detail-btn { |
| 296 | + background: none; |
| 297 | + border: none; |
| 298 | + width: auto; |
| 299 | + height: auto; |
| 300 | + cursor: pointer; |
| 301 | + font-size: 1rem; |
| 302 | + line-height: 1; |
| 303 | + padding: 0.8px; |
| 304 | + opacity: 0.7; |
| 305 | + transition: opacity 0.2s, color 0.2s; |
| 306 | + color: var(--text-primary); |
| 307 | + margin-left: 8px; |
| 308 | + } |
| 309 | + .detail-btn:hover { |
| 310 | + opacity: 1; |
| 311 | + color: #3b82f6; |
| 312 | + } |
261 | 313 | .form-input:focus { |
262 | 314 | outline: 2px solid var(--form-input-focus); |
263 | 315 | outline-offset: 2px; |
|
556 | 608 |
|
557 | 609 | .route-info { |
558 | 610 | margin-bottom: 12px; |
| 611 | + border-left: 6px solid; |
| 612 | + padding-left: 12px; |
| 613 | + border-radius: 0; |
559 | 614 | } |
560 | 615 |
|
561 | 616 | .route-info > :not(:last-child) { |
|
586 | 641 |
|
587 | 642 | .route-tag { |
588 | 643 | font-weight: 600; |
589 | | - color: white; |
| 644 | + background-color: transparent !important; |
590 | 645 | } |
591 | 646 |
|
592 | 647 | .direction-indicator { |
593 | | - background: var(--bg-tertiary); |
594 | 648 | margin-top: 2px; |
595 | 649 | color: var(--text-primary); |
596 | 650 | } |
597 | 651 |
|
598 | 652 | .time-detail { |
599 | | - background: var(--bg-tertiary); |
600 | 653 | margin-top: 2px; |
| 654 | + color: var(--text-primary); |
601 | 655 | } |
602 | 656 |
|
603 | 657 | .station { |
|
611 | 665 | .divider { |
612 | 666 | display: inline; |
613 | 667 | margin-right: 8px; |
614 | | - color: #6c757d; |
| 668 | + color: var(--text-tertiary); |
615 | 669 | font-style: italic; |
616 | 670 | font-weight: 600; |
617 | 671 | } |
|
620 | 674 | display: flex; |
621 | 675 | align-items: center; |
622 | 676 | padding: 2px 6px; |
623 | | - background: var(--bg-tertiary); |
624 | | - border-radius: 4px; |
625 | 677 | margin-top: 2px; |
626 | 678 | font-size: 0.85rem; |
627 | 679 | color: var(--text-primary); |
628 | 680 | } |
629 | 681 |
|
| 682 | + /* 统一的标签样式,用于线路类型和站台编号 */ |
| 683 | + .route-tag-label { |
| 684 | + margin-left: 8px; |
| 685 | + opacity: 0.8; |
| 686 | + padding: 1px 6px; |
| 687 | + background-color: var(--bg-tertiary); |
| 688 | + color: var(--text-secondary); |
| 689 | + border: 1px solid var(--border-color); |
| 690 | + border-radius: 4px; |
| 691 | + font-size: 0.85em; |
| 692 | + font-family: inherit; |
| 693 | + line-height: normal; |
| 694 | + white-space: nowrap; |
| 695 | + display: inline-flex; |
| 696 | + align-items: center; |
| 697 | + } |
| 698 | + |
| 699 | + /* 站台编号标签 - 正常粗细 */ |
| 700 | + .station-info-label { |
| 701 | + font-weight: normal; |
| 702 | + } |
| 703 | + |
| 704 | + /* 线路类型标签 - 粗体 */ |
| 705 | + .line-type-label { |
| 706 | + font-weight: bold; |
| 707 | + } |
| 708 | + |
| 709 | + /* 确保字号统一 */ |
| 710 | + .route-name { |
| 711 | + font-size: 1em; |
| 712 | + } |
| 713 | + |
630 | 714 | .direction-indicator::before { |
631 | 715 | content: "→"; |
632 | 716 | margin-right: 4px; |
|
637 | 721 | display: flex; |
638 | 722 | align-items: center; |
639 | 723 | padding: 2px 6px; |
640 | | - background: var(--bg-tertiary); |
641 | | - border-radius: 4px; |
642 | 724 | margin-top: 2px; |
643 | 725 | font-size: 0.85rem; |
| 726 | + color: var(--text-primary); |
644 | 727 | } |
645 | 728 |
|
646 | 729 | .time-value { |
|
660 | 743 | margin-right: 6px; |
661 | 744 | margin-top: 2px; |
662 | 745 | font-size: 0.8rem; |
663 | | - color: #6c757d; |
| 746 | + color: var(--text-tertiary); |
664 | 747 | font-style: italic; |
665 | 748 | } |
666 | 749 |
|
|
672 | 755 | .other-route-tag { |
673 | 756 | display: inline-block; |
674 | 757 | padding: 2px 6px; |
675 | | - border-radius: 4px; |
676 | 758 | font-size: 0.75rem; |
677 | 759 | font-weight: 500; |
678 | 760 | margin-right: 4px; |
679 | 761 | margin-bottom: 4px; |
680 | 762 | cursor: pointer; |
681 | | - transition: filter 0.2s ease; |
| 763 | + transition: opacity 0.2s ease; |
682 | 764 | vertical-align: top; |
| 765 | + background: transparent; |
683 | 766 | } |
684 | 767 |
|
685 | 768 | /* 移动端菜单样式 */ |
|
741 | 824 | display: flex; |
742 | 825 | align-items: center; |
743 | 826 | padding: 2px 6px; |
744 | | - border-radius: 4px; |
745 | 827 | font-size: 0.85rem; |
746 | 828 | line-height: 1.5; |
747 | 829 | width: 100%; |
748 | 830 | margin: 8px 0; |
749 | | - background: var(--bg-tertiary); |
| 831 | + color: var(--text-primary); |
750 | 832 | } |
751 | 833 |
|
752 | 834 | .departure-time, .arrival-time { |
753 | | - background: var(--bg-tertiary); |
754 | 835 | font-size: 0.85rem; |
755 | 836 | color: var(--accent-primary); |
756 | 837 | font-weight: 600; |
|
759 | 840 | .route-departure-time, .route-arrival-time { |
760 | 841 | font-size: 0.85rem; |
761 | 842 | color: var(--text-secondary); |
762 | | - background: var(--bg-tertiary); |
763 | 843 | } |
764 | 844 |
|
765 | 845 | .version-info { |
|
0 commit comments