| .panel { | |
| width: 300px; | |
| flex: 0 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| border-left: 1px solid #e0e0e0; | |
| background: #fafafa; | |
| height: 100svh; | |
| overflow: hidden; | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .title { | |
| margin: 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .close { | |
| border: none; | |
| background: transparent; | |
| cursor: pointer; | |
| font-size: 14px; | |
| color: #666; | |
| padding: 4px 8px; | |
| border-radius: 6px; | |
| &:hover { | |
| background: #eee; | |
| } | |
| } | |
| .hint { | |
| margin: 0; | |
| padding: 12px 16px; | |
| font-size: 12px; | |
| color: #777; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .loading { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px; | |
| font-size: 13px; | |
| color: #666; | |
| } | |
| .spinner { | |
| width: 14px; | |
| height: 14px; | |
| border: 2px solid #ccc; | |
| border-top-color: #666; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .empty { | |
| padding: 16px; | |
| font-size: 13px; | |
| color: #777; | |
| } | |
| .list { | |
| list-style: none; | |
| margin: 0; | |
| padding: 8px; | |
| overflow-y: auto; | |
| flex: 1 1 auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px; | |
| border: 1px solid #e4e4e4; | |
| border-radius: 10px; | |
| background: #fff; | |
| } | |
| .itemInfo { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| } | |
| .snippet { | |
| font-size: 12px; | |
| color: #333; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .forkButton { | |
| flex: 0 0 auto; | |
| border: 1px solid #d0d0d0; | |
| background: #fff; | |
| border-radius: 8px; | |
| padding: 5px 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| &:hover:not(:disabled) { | |
| background: #f0f0f0; | |
| } | |
| &:disabled { | |
| cursor: default; | |
| color: #1a7f37; | |
| border-color: #b7e4c7; | |
| background: #ebfbee; | |
| } | |
| } | |