update
This commit is contained in:
@@ -107,6 +107,7 @@
|
||||
}
|
||||
|
||||
.tiptap pre {
|
||||
position: relative;
|
||||
background: theme('colors.white / 4%');
|
||||
border: 1px solid theme('colors.white / 6%');
|
||||
border-radius: 0.75rem;
|
||||
@@ -115,6 +116,7 @@
|
||||
}
|
||||
|
||||
.tiptap pre code {
|
||||
display: block;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
@@ -122,6 +124,65 @@
|
||||
color: theme('colors.zinc.300');
|
||||
}
|
||||
|
||||
.tiptap .hljs {
|
||||
color: theme('colors.zinc.200');
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tiptap .hljs-comment,
|
||||
.tiptap .hljs-quote {
|
||||
color: theme('colors.zinc.500');
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tiptap .hljs-keyword,
|
||||
.tiptap .hljs-selector-tag,
|
||||
.tiptap .hljs-subst {
|
||||
color: theme('colors.fuchsia.300');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tiptap .hljs-string,
|
||||
.tiptap .hljs-attr,
|
||||
.tiptap .hljs-template-tag,
|
||||
.tiptap .hljs-template-variable {
|
||||
color: theme('colors.sky.300');
|
||||
}
|
||||
|
||||
.tiptap .hljs-title,
|
||||
.tiptap .hljs-section,
|
||||
.tiptap .hljs-name,
|
||||
.tiptap .hljs-selector-id,
|
||||
.tiptap .hljs-selector-class {
|
||||
color: theme('colors.blue.300');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tiptap .hljs-number,
|
||||
.tiptap .hljs-literal,
|
||||
.tiptap .hljs-symbol,
|
||||
.tiptap .hljs-bullet {
|
||||
color: theme('colors.amber.300');
|
||||
}
|
||||
|
||||
.tiptap .hljs-built_in,
|
||||
.tiptap .hljs-type,
|
||||
.tiptap .hljs-class {
|
||||
color: theme('colors.rose.300');
|
||||
}
|
||||
|
||||
.tiptap .hljs-variable,
|
||||
.tiptap .hljs-property,
|
||||
.tiptap .hljs-params,
|
||||
.tiptap .hljs-operator {
|
||||
color: theme('colors.zinc.200');
|
||||
}
|
||||
|
||||
.tiptap .hljs-meta,
|
||||
.tiptap .hljs-doctag {
|
||||
color: theme('colors.zinc.400');
|
||||
}
|
||||
|
||||
.tiptap blockquote {
|
||||
border-left: 3px solid theme('colors.sky.500 / 40%');
|
||||
padding-left: 1rem;
|
||||
@@ -160,6 +221,204 @@
|
||||
color: theme('colors.sky.200');
|
||||
}
|
||||
|
||||
.story-prose pre {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: rgba(51, 65, 85, 0.95) !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0, rgba(15, 23, 42, 0.98) 3rem, rgba(2, 6, 23, 0.98) 3rem, rgba(2, 6, 23, 0.98) 100%) !important;
|
||||
box-shadow:
|
||||
0 26px 75px rgba(2, 6, 23, 0.5),
|
||||
inset 0 1px 0 rgba(56, 189, 248, 0.08);
|
||||
padding: 4rem 1.5rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.story-prose pre[data-language]::before {
|
||||
content: attr(data-language);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0.7rem;
|
||||
left: 1.25rem;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
padding: 0.18rem 0.55rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(125 211 252);
|
||||
}
|
||||
|
||||
.story-prose pre::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3rem 0 auto 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0));
|
||||
}
|
||||
|
||||
.story-code-copy-button {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0.7rem;
|
||||
right: 1.25rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.32);
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
padding: 0.35rem 0.78rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgb(241 245 249);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
|
||||
.story-code-copy-button:hover {
|
||||
background: rgb(14 165 233);
|
||||
border-color: rgb(56 189 248);
|
||||
color: rgb(2 6 23);
|
||||
box-shadow: 0 10px 24px rgba(14, 165, 233, 0.22);
|
||||
}
|
||||
|
||||
.story-code-copy-button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.story-code-copy-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.story-code-copy-label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.story-code-copy-button[data-copied='true'] {
|
||||
background: rgb(14 116 144);
|
||||
border-color: rgb(34 211 238);
|
||||
color: white;
|
||||
box-shadow: 0 12px 28px rgba(14, 116, 144, 0.22);
|
||||
}
|
||||
|
||||
.story-code-copy-button[data-copied='false'] {
|
||||
background: rgb(153 27 27);
|
||||
border-color: rgb(248 113 113);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.story-code-copy-button[data-copied='true'] .story-code-copy-icon {
|
||||
animation: story-code-copy-check 320ms cubic-bezier(.2,.9,.25,1.2);
|
||||
}
|
||||
|
||||
.story-code-copy-button[data-copied='true'] .story-code-copy-label {
|
||||
animation: story-code-copy-label 220ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes story-code-copy-check {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.4) rotate(-24deg);
|
||||
}
|
||||
55% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2) rotate(6deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes story-code-copy-label {
|
||||
0% {
|
||||
opacity: 0.15;
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.story-prose pre code.hljs,
|
||||
.story-prose pre code[class*='language-'] {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.story-prose .hljs {
|
||||
color: rgb(226 232 240);
|
||||
background: transparent;
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.story-prose .hljs-comment,
|
||||
.story-prose .hljs-quote {
|
||||
color: rgb(100 116 139);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.story-prose .hljs-keyword,
|
||||
.story-prose .hljs-selector-tag,
|
||||
.story-prose .hljs-subst {
|
||||
color: rgb(125 211 252);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.story-prose .hljs-string,
|
||||
.story-prose .hljs-attr,
|
||||
.story-prose .hljs-template-tag,
|
||||
.story-prose .hljs-template-variable {
|
||||
color: rgb(134 239 172);
|
||||
}
|
||||
|
||||
.story-prose .hljs-title,
|
||||
.story-prose .hljs-section,
|
||||
.story-prose .hljs-name,
|
||||
.story-prose .hljs-selector-id,
|
||||
.story-prose .hljs-selector-class {
|
||||
color: rgb(196 181 253);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.story-prose .hljs-number,
|
||||
.story-prose .hljs-literal,
|
||||
.story-prose .hljs-symbol,
|
||||
.story-prose .hljs-bullet {
|
||||
color: rgb(251 191 36);
|
||||
}
|
||||
|
||||
.story-prose .hljs-built_in,
|
||||
.story-prose .hljs-type,
|
||||
.story-prose .hljs-class {
|
||||
color: rgb(244 114 182);
|
||||
}
|
||||
|
||||
.story-prose .hljs-variable,
|
||||
.story-prose .hljs-property,
|
||||
.story-prose .hljs-params,
|
||||
.story-prose .hljs-operator {
|
||||
color: rgb(15 23 42);
|
||||
}
|
||||
|
||||
.story-prose .hljs-meta,
|
||||
.story-prose .hljs-doctag {
|
||||
color: rgb(71 85 105);
|
||||
}
|
||||
|
||||
/* ─── @mention pills ─── */
|
||||
.tiptap .mention,
|
||||
.mention {
|
||||
|
||||
Reference in New Issue
Block a user