pcap-element
Version:
A reusable Web Component for PCAP file preview
1 lines • 4.41 kB
CSS
:host{display:block;font-family:"JetBrains Mono","Consolas","Monaco","Courier New",monospace;border:1px solid #e0e0e0;border-radius:6px;padding:12px;margin:12px 0;background:#fafafa;font-size:12px;line-height:1.4;position:relative}.loading{text-align:center;padding:16px;color:#666;font-size:12px}.error{color:#d32f2f;background:#ffebee;padding:8px 10px;border-radius:3px;margin:6px 0;font-size:11px;border-left:3px solid #d32f2f}.format-toggle{position:absolute;top:8px;right:8px;background:#3b82f6;color:#fff;border:none;border-radius:4px;padding:6px 12px;font-size:11px;font-weight:500;cursor:pointer;transition:background-color .2s ease;z-index:10;font-family:inherit}.format-toggle:hover{background:#2563eb}.format-toggle:active{background:#1d4ed8}.summary{background:#f3f4f6;padding:10px;border-radius:4px;margin-bottom:12px;border:1px solid #e5e7eb}.summary h3{margin:0 0 6px 0;color:#374151;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.summary-grid{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}.summary-item{background:#fff;padding:6px 8px;border-radius:3px;text-align:center;border:1px solid #e5e7eb;flex:1;min-width:0}.summary-item .label{font-size:10px;color:#6b7280;text-transform:uppercase;font-weight:500;letter-spacing:.3px}.summary-item .value{font-size:15px;font-weight:600;color:#1f2937;margin-top:2px}.summary-details{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;padding-top:8px;border-top:1px solid #e5e7eb;font-size:11px;line-height:1.4}.detail-item{color:#374151;background:#f8f9fa;padding:4px 8px;border-radius:3px;border:1px solid #e9ecef;white-space:nowrap}.detail-item strong{color:#1f2937;font-weight:600}.packets{border:1px solid #e5e7eb;border-radius:4px;background:#fff}.packet.even{background:#fff}.packet.odd{background:#f8fafc}.packet{margin:0;padding:12px 16px;border:none;border-radius:0;box-shadow:none;transition:background-color .2s ease;position:relative}.packet:hover{background-color:#e5e7eb }.packet.odd:hover{background-color:#d1d5db }.packet-divider{height:1px;background:#e5e7eb;margin:0;opacity:.6}.packet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #f3f4f6;font-size:11px}.packet-title{display:flex;align-items:center;gap:8px}.packet-info{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;font-size:10px}.packet-info .info-item{display:flex;justify-content:space-between;padding:2px 4px;background:#f3f4f6;border-radius:2px}.packet-info .info-label{color:#6b7280;font-weight:600}.packet-info .info-value{color:#1f2937;font-weight:500}.packet-data{background:#f8f9fa;padding:8px;border-radius:3px;font-family:"JetBrains Mono","Consolas","Monaco","Courier New",monospace;font-size:10px;line-height:1.3;max-height:200px;overflow-y:auto;word-break:break-all;border:1px solid #e9ecef;color:#374151}.hex-data{background:#1e1e1e;color:#d4d4d4;border:1px solid #404040}.hex-data pre{margin:0;font-family:"JetBrains Mono","Consolas","Monaco","Courier New",monospace;font-size:10px;line-height:1.4;white-space:pre;overflow-x:auto}.protocol-badge{padding:2px 6px;border-radius:3px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#fff}.protocol-badge.smtp{background:#059669}.protocol-badge.tcp{background:#3b82f6}.protocol-badge.udp{background:#8b5cf6}.protocol-badge.icmp{background:#f59e0b}.protocol-badge.arp{background:#ef4444}.protocol-badge.http{background:#10b981}.protocol-badge.https{background:#059669}@media(max-width: 768px){:host{padding:8px;font-size:11px}.summary-grid{flex-direction:column;gap:6px}.packet-info{grid-template-columns:1fr;gap:4px}.packet-header{flex-direction:column;align-items:flex-start;gap:4px}}.loading{animation:pulse 1.5s ease-in-out infinite alternate}@keyframes pulse{from{opacity:.6}to{opacity:1}}.summary-item:hover{background:#f8fafc;border-color:#d1d5db;transition:all .2s ease}.packets::-webkit-scrollbar{width:6px}.packets::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.packets::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.packets::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.packet-data::-webkit-scrollbar{width:6px}.packet-data::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.packet-data::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}