Download packages/ui/src/v2/components/line-comment-v2.css from SaylorTwift/opencode: direct link, hf CLI and curl.
- Browser
- Download file 6.7 kB
-
https://huggingface.co/SaylorTwift/opencode/resolve/main/packages/ui/src/v2/components/line-comment-v2.css
- Command line
-
hf download hf://SaylorTwift/opencode/packages/ui/src/v2/components/line-comment-v2.css
-
curl -L -o line-comment-v2.css https://huggingface.co/SaylorTwift/opencode/resolve/main/packages/ui/src/v2/components/line-comment-v2.css
6.7 kB
| * { | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: geometricPrecision; | |
| } | |
| [data-component="line-comment-v2"] { | |
| box-sizing: border-box; | |
| font-family: var(--v2-font-family-sans); | |
| font-variant-numeric: tabular-nums; | |
| min-width: 0; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| [data-component="line-comment-v2"] *, | |
| [data-component="line-comment-v2"] *::before, | |
| [data-component="line-comment-v2"] *::after { | |
| box-sizing: border-box; | |
| } | |
| [data-component="line-comment-v2"] [data-slot="line-comment-v2-shell"] { | |
| background: var(--v2-background-bg-layer-01); | |
| border-radius: 6px; | |
| box-shadow: var(--v2-elevation-raised); | |
| } | |
| /* --- Display (read) --- */ | |
| [data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-shell"] { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: flex-start; | |
| padding: 12px; | |
| gap: 8px; | |
| } | |
| [data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-column"] { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 8px; | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-text"] { | |
| margin: 0; | |
| width: 100%; | |
| font-size: 13px; | |
| font-style: normal; | |
| font-weight: 440; | |
| line-height: 1; | |
| letter-spacing: -0.04px; | |
| color: var(--v2-text-text-base); | |
| font-variation-settings: "slnt" 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-meta"] { | |
| font-size: 11px; | |
| font-style: normal; | |
| font-weight: 530; | |
| line-height: 1; | |
| letter-spacing: 0.05px; | |
| color: var(--v2-text-text-faint); | |
| font-variation-settings: "slnt" 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="display"] [data-slot="line-comment-v2-tools"] { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: flex-start; | |
| flex-shrink: 0; | |
| } | |
| [data-slot="line-comment-v2-overflow"] { | |
| display: inline-flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| width: 20px; | |
| height: 20px; | |
| padding: 2px; | |
| gap: 3px; | |
| margin: 0; | |
| border: none; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: var(--v2-icon-icon-muted); | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| [data-slot="line-comment-v2-overflow"]:focus { | |
| outline: none; | |
| } | |
| [data-slot="line-comment-v2-overflow"]:focus-visible { | |
| outline: 2px solid var(--v2-border-border-focus); | |
| outline-offset: 2px; | |
| } | |
| [data-slot="line-comment-v2-overflow"]:is(:hover, [data-state="hover"]) { | |
| background-color: var(--v2-overlay-simple-overlay-hover); | |
| } | |
| [data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) { | |
| background-color: var(--v2-overlay-simple-overlay-pressed); | |
| } | |
| [data-slot="line-comment-v2-overflow"] svg { | |
| display: block; | |
| flex-shrink: 0; | |
| } | |
| /* --- Editor --- */ | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-shell"] { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| padding: 12px; | |
| gap: 12px; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-field"] { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 8px; | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-label"] { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| width: 100%; | |
| font-size: 13px; | |
| font-style: normal; | |
| font-weight: 530; | |
| line-height: 1; | |
| letter-spacing: -0.04px; | |
| color: var(--v2-text-text-base); | |
| user-select: none; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"] { | |
| display: block; | |
| width: 100%; | |
| min-width: 0; | |
| min-height: 80px; | |
| padding: 8px; | |
| margin: 0; | |
| resize: vertical; | |
| border: 1px solid var(--v2-border-border-base); | |
| border-radius: 6px; | |
| background: | |
| linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base); | |
| font-size: 13px; | |
| font-style: normal; | |
| font-weight: 440; | |
| line-height: 1.35; | |
| letter-spacing: -0.04px; | |
| color: var(--v2-text-text-base); | |
| font-variation-settings: "slnt" 0; | |
| outline: none; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]::placeholder { | |
| color: var(--v2-text-text-faint); | |
| user-select: none; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]:focus { | |
| border-color: var(--v2-border-border-focus); | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer"] { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 4px; | |
| width: 100%; | |
| min-width: 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer-meta"] { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| font-size: 11px; | |
| font-style: normal; | |
| font-weight: 530; | |
| line-height: 1; | |
| letter-spacing: 0.05px; | |
| color: var(--v2-text-text-faint); | |
| font-variation-settings: "slnt" 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer-actions"] { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-list"] { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| max-height: 180px; | |
| overflow: auto; | |
| margin-top: 8px; | |
| padding: 4px; | |
| border: 0.5px solid var(--v2-border-border-muted); | |
| border-radius: 6px; | |
| background: var(--v2-background-bg-layer-02); | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-item"] { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| min-width: 0; | |
| padding: 6px 8px; | |
| border: 0; | |
| border-radius: 4px; | |
| background: transparent; | |
| color: var(--v2-text-text-base); | |
| text-align: start; | |
| cursor: pointer; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-item"][data-active] { | |
| background: var(--v2-background-bg-layer-03); | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-path"] { | |
| display: flex; | |
| align-items: center; | |
| min-width: 0; | |
| font-size: 12px; | |
| line-height: 16px; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-dir"] { | |
| min-width: 0; | |
| color: var(--v2-text-text-muted); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-mention-file"] { | |
| color: var(--v2-text-text-base); | |
| white-space: nowrap; | |
| } | |