Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-03 02:20:19 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
9343e29fea0252ce2cd0a9c5624a506107823df4
AFFiNE-Mirror/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
T

502 lines
14 KiB
TypeScript
Raw Blame History

import { css, html } from 'lit';
export const styles = css`
.affine-embed-github-block {
container: affine-embed-github-block / inline-size;
box-sizing: border-box;
display: flex;
width: 100%;
height: 100%;
border-radius: 8px;
border: 1px solid var(--affine-background-tertiary-color);
background: var(--affine-background-primary-color);
user-select: none;
overflow: hidden;
}
.affine-embed-github-content {
display: flex;
flex-grow: 1;
flex-direction: column;
align-self: stretch;
gap: 4px;
padding: 12px;
overflow: hidden;
}
.affine-embed-github-content-title {
display: flex;
min-height: 22px;
flex-direction: row;
gap: 8px;
align-items: center;
align-self: stretch;
}
.affine-embed-github-content-title-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.affine-embed-github-content-title-icons img,
.affine-embed-github-content-title-icons object,
.affine-embed-github-content-title-icons svg {
width: 16px;
height: 16px;
color: var(--affine-pure-white);
}
.affine-embed-github-content-title-site-icon {
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
.github-icon {
fill: var(--affine-black);
color: var(--affine-black);
}
}
.affine-embed-github-content-title-status-icon {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 6px;
border-radius: 20px;
color: var(--affine-pure-white);
leading-trim: both;
text-edge: cap;
font-feature-settings:
'clig' off,
'liga' off;
text-transform: capitalize;
font-family: var(--affine-font-family);
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
}
.affine-embed-github-content-title-status-icon.issue.open {
background: #238636;
}
.affine-embed-github-content-title-status-icon.issue.closed.success {
background: #8957e5;
}
.affine-embed-github-content-title-status-icon.issue.closed.failure {
background: #6e7681;
}
.affine-embed-github-content-title-status-icon.pr.open {
background: #238636;
}
.affine-embed-github-content-title-status-icon.pr.draft {
background: #6e7681;
}
.affine-embed-github-content-title-status-icon.pr.merged {
background: #8957e5;
}
.affine-embed-github-content-title-status-icon.pr.closed {
background: #c03737;
}
.affine-embed-github-content-title-status-icon > svg {
height: 16px;
width: 16px;
padding: 2px;
}
.affine-embed-github-content-title-status-icon > span {
padding: 0px 1.5px;
}
.affine-embed-github-content-title-text {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-text-primary-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-sm);
font-style: normal;
font-weight: 600;
line-height: 22px;
}
.affine-embed-github-content-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex-grow: 1;
word-break: break-word;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-text-primary-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.affine-embed-github-content-assignees {
display: none;
}
.affine-embed-github-content-url {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
width: max-content;
max-width: 100%;
cursor: pointer;
}
.affine-embed-github-content-url > span {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
color: var(--affine-text-secondary-color);
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 400;
line-height: 20px;
}
.affine-embed-github-content-url:hover > span {
color: var(--affine-link-color);
}
.affine-embed-github-content-url:hover .open-icon {
fill: var(--affine-link-color);
}
.affine-embed-github-content-url-icon {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
}
.affine-embed-github-content-url-icon .open-icon {
height: 12px;
width: 12px;
fill: var(--affine-text-secondary-color);
}
.affine-embed-github-banner {
margin: 12px 0px 0px 12px;
width: 204px;
height: 102px;
}
.affine-embed-github-banner img,
.affine-embed-github-banner object,
.affine-embed-github-banner svg {
width: 204px;
height: 102px;
object-fit: cover;
border-radius: 4px;
}
.affine-embed-github-block.loading {
.affine-embed-github-content-title-text {
color: var(--affine-placeholder-color);
}
}
.affine-embed-github-block.selected {
.affine-embed-github-content-url > span {
color: var(--affine-link-color);
}
.affine-embed-github-content-url .open-icon {
fill: var(--affine-link-color);
}
}
.affine-embed-github-block.list {
.affine-embed-github-content {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.affine-embed-github-content-title {
width: 660px;
}
.affine-embed-github-content-repo {
display: none;
}
.affine-embed-github-content-date {
display: none;
}
.affine-embed-github-content-url {
width: 90px;
justify-content: flex-end;
}
.affine-embed-github-content-description {
display: none;
}
.affine-embed-github-banner {
display: none;
}
}
.affine-embed-github-block.vertical {
flex-direction: column-reverse;
.affine-embed-github-content {
width: 100%;
}
.affine-embed-github-content-description {
-webkit-line-clamp: 6;
}
.affine-embed-github-content-assignees {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
align-self: stretch;
}
.affine-embed-github-content-assignees-text {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-family: var(--affine-font-family);
font-size: var(--affine-font-xs);
font-style: normal;
font-weight: 600;
line-height: 20px;
}
.affine-embed-github-content-assignees-text.label {
width: 72px;
color: var(--affine-text-primary-color);
font-weight: 600;
}
.affine-embed-github-content-assignees-text.users {
width: calc(100% - 72px);
word-break: break-all;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
}
.affine-embed-github-content-assignees-text-users.user {
color: var(--affine-link-color);
cursor: pointer;
}
.affine-embed-github-content-assignees-text-users.placeholder {
color: var(--affine-placeholder-color);
}
.affine-embed-github-banner {
width: 340px;
height: 170px;
margin-left: 12px;
}
.affine-embed-github-banner img,
.affine-embed-github-banner object,
.affine-embed-github-banner svg {
width: 340px;
height: 170px;
}
}
.affine-embed-github-block.cube {
.affine-embed-github-content {
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
.affine-embed-github-content-title {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.affine-embed-github-content-title-text {
-webkit-line-clamp: 2;
}
.affine-embed-github-content-description {
display: none;
}
.affine-embed-github-banner {
display: none;
}
.affine-embed-github-content-repo {
display: none;
}
.affine-embed-github-content-date {
display: none;
}
}
@container affine-embed-github-block (width < 375px) {
.affine-embed-github-content {
width: 100%;
}
.affine-embed-github-block:not(.edgeless) .affine-embed-github-banner {
display: none;
}
}
`;
export const GithubIcon = html`<svg
class="github-icon"
width="20"
height="20"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.00016 1.33334C4.31683 1.33334 1.3335 4.39214 1.3335 8.16864C1.3335 11.1933 3.24183 13.7479 5.89183 14.6536C6.22516 14.7134 6.35016 14.5084 6.35016 14.3289C6.35016 14.1666 6.34183 13.6283 6.34183 13.0559C4.66683 13.372 4.2335 12.6372 4.10016 12.2527C4.02516 12.0562 3.70016 11.4496 3.41683 11.2872C3.1835 11.1591 2.85016 10.8429 3.4085 10.8344C3.9335 10.8259 4.3085 11.33 4.4335 11.535C5.0335 12.5689 5.99183 12.2784 6.37516 12.0989C6.4335 11.6546 6.6085 11.3556 6.80016 11.1847C5.31683 11.0138 3.76683 10.4243 3.76683 7.80978C3.76683 7.06644 4.02516 6.45127 4.45016 5.9728C4.3835 5.80192 4.15016 5.1013 4.51683 4.16145C4.51683 4.16145 5.07516 3.98202 6.35016 4.86206C6.8835 4.70827 7.45016 4.63137 8.01683 4.63137C8.5835 4.63137 9.15016 4.70827 9.6835 4.86206C10.9585 3.97348 11.5168 4.16145 11.5168 4.16145C11.8835 5.1013 11.6502 5.80192 11.5835 5.9728C12.0085 6.45127 12.2668 7.0579 12.2668 7.80978C12.2668 10.4328 10.7085 11.0138 9.22516 11.1847C9.46683 11.3983 9.67516 11.8084 9.67516 12.4492C9.67516 13.3635 9.66683 14.0983 9.66683 14.3289C9.66683 14.5084 9.79183 14.722 10.1252 14.6536C11.4486 14.1955 12.5986 13.3234 13.4133 12.1601C14.228 10.9968 14.6664 9.60079 14.6668 8.16864C14.6668 4.39214 11.6835 1.33334 8.00016 1.33334Z"
/>
</svg> `;
export const GithubIssueOpenIcon = html`<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
></path>
</svg>`;
export const GithubIssueClosedSuccessIcon = html`<svg
aria-hidden="true"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
data-view-component="true"
class="octicon octicon-issue-closed flex-items-center mr-1"
fill="currentColor"
>
<path
d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
></path>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
></path>
</svg>`;
export const GithubIssueClosedFailureIcon = html`<svg
aria-hidden="true"
height="16"
viewBox="0 0 16 16"
version="1.1"
width="16"
data-view-component="true"
class="octicon octicon-skip flex-items-center mr-1"
fill="currentColor"
>
<path
d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
></path>
</svg>`;
export const GithubPROpenIcon = html`<svg
height="16"
class="octicon octicon-git-pull-request"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
fill="currentColor"
>
<path
d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
></path>
</svg>`;
export const GithubPRDraftIcon = html`<svg
height="16"
class="octicon octicon-git-pull-request-draft"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
fill="currentColor"
>
<path
d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 7.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0-4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
></path>
</svg>`;
export const GithubPRMergedIcon = html`<svg
height="16"
class="octicon octicon-git-merge"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
fill="currentColor"
>
<path
d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"
></path>
</svg>`;
export const GithubPRClosedIcon = html`<svg
height="16"
class="octicon octicon-git-pull-request-closed"
viewBox="0 0 16 16"
version="1.1"
width="16"
aria-hidden="true"
fill="currentColor"
>
<path
d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
></path>
</svg>`;
Reference in New Issue View Git Blame Copy Permalink