|
588 | 588 | } |
589 | 589 |
|
590 | 590 | /** |
591 | | - * Hero block at the top of the Request panel — verb + URL + status + meta line. |
592 | | - * Reuses the snapshot status pill so colors stay consistent with the sidebar card. |
| 591 | + * Request overview — a continuous telemetry rail for identity, response, |
| 592 | + * runtime metrics, and capture metadata. |
593 | 593 | */ |
594 | | - .yii-debug-request-hero { |
| 594 | + .yii-debug-request-overview { |
| 595 | + overflow: hidden; |
595 | 596 | margin-bottom: var(--yii-debug-space-4); |
596 | | - padding: var(--yii-debug-space-3) var(--yii-debug-space-4); |
597 | 597 | border: var(--yii-debug-border); |
598 | | - border-radius: var(--yii-debug-radius-md); |
599 | | - background: var(--yii-debug-panel-surface-muted); |
| 598 | + border-inline-start: 4px solid |
| 599 | + color-mix( |
| 600 | + in srgb, |
| 601 | + var(--yii-debug-hue, var(--yii-debug-panel-muted)) 76%, |
| 602 | + var(--yii-debug-panel-text) |
| 603 | + ); |
| 604 | + border-radius: var(--yii-debug-radius-lg); |
| 605 | + background: var(--yii-debug-panel-surface); |
| 606 | + box-shadow: var(--yii-debug-shadow-sm); |
| 607 | + } |
| 608 | + |
| 609 | + .yii-debug-request-overview-header { |
| 610 | + display: grid; |
| 611 | + grid-template-columns: minmax(0, 1fr) auto; |
| 612 | + gap: var(--yii-debug-space-4); |
| 613 | + align-items: center; |
| 614 | + padding: var(--yii-debug-space-4); |
| 615 | + } |
| 616 | + |
| 617 | + .yii-debug-request-overview-identity { |
| 618 | + min-width: 0; |
| 619 | + } |
| 620 | + |
| 621 | + .yii-debug-request-overview-label, |
| 622 | + .yii-debug-request-overview-status-label, |
| 623 | + .yii-debug-panel-heading-eyebrow { |
| 624 | + display: block; |
| 625 | + margin-bottom: 5px; |
| 626 | + color: var(--yii-debug-panel-muted); |
| 627 | + font-size: 0.6875rem; |
| 628 | + font-weight: 700; |
| 629 | + letter-spacing: 0.09em; |
| 630 | + line-height: 1.2; |
| 631 | + text-transform: uppercase; |
600 | 632 | } |
601 | 633 |
|
602 | 634 | .yii-debug-request-hero-line { |
|
626 | 658 | white-space: nowrap; |
627 | 659 | } |
628 | 660 |
|
629 | | - .yii-debug-request-hero-meta { |
| 661 | + .yii-debug-request-overview-status { |
| 662 | + min-width: 72px; |
| 663 | + text-align: right; |
| 664 | + } |
| 665 | + |
| 666 | + .yii-debug-request-overview-status-value { |
| 667 | + padding: 3px 9px; |
| 668 | + font-family: var(--yii-debug-font-mono); |
| 669 | + font-size: var(--yii-debug-fs-lg); |
| 670 | + letter-spacing: -0.03em; |
| 671 | + line-height: 1.2; |
| 672 | + } |
| 673 | + |
| 674 | + .yii-debug-request-overview-metrics { |
| 675 | + display: grid; |
| 676 | + grid-template-columns: repeat(3, minmax(0, 1fr)); |
| 677 | + margin: 0; |
| 678 | + border-block: var(--yii-debug-border); |
| 679 | + background: var(--yii-debug-panel-surface-muted); |
| 680 | + } |
| 681 | + |
| 682 | + .yii-debug-request-overview-metric { |
| 683 | + min-width: 0; |
| 684 | + padding: var(--yii-debug-space-3) var(--yii-debug-space-4); |
| 685 | + |
| 686 | + & + & { |
| 687 | + border-inline-start: var(--yii-debug-border); |
| 688 | + } |
| 689 | + |
| 690 | + dt { |
| 691 | + margin-bottom: 2px; |
| 692 | + color: var(--yii-debug-panel-muted); |
| 693 | + font-size: 0.6875rem; |
| 694 | + font-weight: 700; |
| 695 | + letter-spacing: 0.07em; |
| 696 | + text-transform: uppercase; |
| 697 | + } |
| 698 | + |
| 699 | + dd { |
| 700 | + overflow: hidden; |
| 701 | + margin: 0; |
| 702 | + color: var(--yii-debug-panel-text); |
| 703 | + font-family: var(--yii-debug-font-mono); |
| 704 | + font-size: var(--yii-debug-fs-sm); |
| 705 | + font-weight: 600; |
| 706 | + text-overflow: ellipsis; |
| 707 | + white-space: nowrap; |
| 708 | + } |
| 709 | + } |
| 710 | + |
| 711 | + .yii-debug-request-overview-meta { |
630 | 712 | display: flex; |
631 | 713 | flex-wrap: wrap; |
632 | | - gap: 6px var(--yii-debug-space-3); |
633 | | - margin-top: 6px; |
| 714 | + align-items: center; |
| 715 | + gap: var(--yii-debug-space-2) var(--yii-debug-space-4); |
| 716 | + padding: 10px var(--yii-debug-space-4); |
634 | 717 | color: var(--yii-debug-panel-muted); |
635 | 718 | font-family: var(--yii-debug-font-mono); |
636 | 719 | font-size: var(--yii-debug-fs-xs); |
637 | 720 | } |
638 | 721 |
|
| 722 | + .yii-debug-request-overview-meta-item { |
| 723 | + display: inline-flex; |
| 724 | + min-width: 0; |
| 725 | + align-items: baseline; |
| 726 | + gap: 6px; |
| 727 | + } |
| 728 | + |
| 729 | + .yii-debug-request-overview-meta-label { |
| 730 | + color: var(--yii-debug-panel-muted); |
| 731 | + font-family: var(--yii-debug-font-sans); |
| 732 | + font-size: 0.625rem; |
| 733 | + font-weight: 700; |
| 734 | + letter-spacing: 0.07em; |
| 735 | + text-transform: uppercase; |
| 736 | + } |
| 737 | + |
| 738 | + .yii-debug-request-overview-tag { |
| 739 | + overflow: hidden; |
| 740 | + max-width: 34ch; |
| 741 | + color: var(--yii-debug-panel-text); |
| 742 | + text-overflow: ellipsis; |
| 743 | + white-space: nowrap; |
| 744 | + } |
| 745 | + |
| 746 | + .yii-debug-request-overview-flag, |
| 747 | + .yii-debug-panel-heading-kind { |
| 748 | + padding: 2px 8px; |
| 749 | + border: var(--yii-debug-border); |
| 750 | + border-radius: var(--yii-debug-radius-pill); |
| 751 | + background: var(--yii-debug-panel-pill); |
| 752 | + color: var(--yii-debug-panel-muted); |
| 753 | + font-family: var(--yii-debug-font-mono); |
| 754 | + font-size: 0.625rem; |
| 755 | + font-weight: 700; |
| 756 | + letter-spacing: 0.07em; |
| 757 | + line-height: 1.4; |
| 758 | + text-transform: uppercase; |
| 759 | + } |
| 760 | + |
| 761 | + .yii-debug-panel-heading { |
| 762 | + display: flex; |
| 763 | + align-items: flex-end; |
| 764 | + justify-content: space-between; |
| 765 | + gap: var(--yii-debug-space-3); |
| 766 | + margin: var(--yii-debug-space-5) 0 var(--yii-debug-space-3); |
| 767 | + padding-bottom: var(--yii-debug-space-2); |
| 768 | + border-bottom: var(--yii-debug-border); |
| 769 | + } |
| 770 | + |
| 771 | + .yii-debug-panel-heading-copy { |
| 772 | + min-width: 0; |
| 773 | + |
| 774 | + h2 { |
| 775 | + margin: 0; |
| 776 | + } |
| 777 | + } |
| 778 | + |
| 779 | + .yii-debug-panel-heading-kind { |
| 780 | + flex: none; |
| 781 | + margin-bottom: 2px; |
| 782 | + } |
| 783 | + |
| 784 | + pre.yii-debug-panel-payload { |
| 785 | + min-height: 180px; |
| 786 | + margin-bottom: 0; |
| 787 | + padding: var(--yii-debug-space-4); |
| 788 | + border: var(--yii-debug-border); |
| 789 | + background: |
| 790 | + linear-gradient( |
| 791 | + 90deg, |
| 792 | + color-mix( |
| 793 | + in srgb, |
| 794 | + var(--yii-debug-panel-primary), |
| 795 | + transparent 88% |
| 796 | + ), |
| 797 | + transparent 42% |
| 798 | + ), |
| 799 | + var(--yii-debug-panel-code-bg); |
| 800 | + line-height: 1.55; |
| 801 | + } |
| 802 | + |
| 803 | + @media (width <= 640px) { |
| 804 | + .yii-debug-request-overview-header { |
| 805 | + grid-template-columns: minmax(0, 1fr); |
| 806 | + gap: var(--yii-debug-space-3); |
| 807 | + } |
| 808 | + |
| 809 | + .yii-debug-request-overview-status { |
| 810 | + display: flex; |
| 811 | + align-items: center; |
| 812 | + gap: var(--yii-debug-space-2); |
| 813 | + text-align: left; |
| 814 | + } |
| 815 | + |
| 816 | + .yii-debug-request-overview-status-label { |
| 817 | + margin: 0; |
| 818 | + } |
| 819 | + |
| 820 | + .yii-debug-request-overview-metrics { |
| 821 | + grid-template-columns: 1fr; |
| 822 | + } |
| 823 | + |
| 824 | + .yii-debug-request-overview-metric + .yii-debug-request-overview-metric { |
| 825 | + border-block-start: var(--yii-debug-border); |
| 826 | + border-inline-start: 0; |
| 827 | + } |
| 828 | + |
| 829 | + .yii-debug-request-overview-meta-item { |
| 830 | + width: 100%; |
| 831 | + } |
| 832 | + |
| 833 | + .yii-debug-panel-heading { |
| 834 | + align-items: flex-start; |
| 835 | + } |
| 836 | + } |
| 837 | + |
639 | 838 | /** |
640 | 839 | * Inline section header used by tabular blocks; pairs the title with an |
641 | 840 | * optional filter input on the right. |
|
0 commit comments