mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
141 lines
4.3 KiB
CSS
141 lines
4.3 KiB
CSS
@utility code-line-number {
|
|
@apply select-none text-right text-muted/70 pl-3 pr-2 min-h-5 leading-5;
|
|
@apply bg-[var(--row-rest)] sticky left-0 z-10;
|
|
@apply group-hover/row:text-muted group-hover/row:bg-[var(--row-hover)];
|
|
@apply after:pointer-events-none after:absolute after:inset-y-0 after:left-full after:w-4;
|
|
@apply [--gutter-fade:var(--row-rest)] group-hover/row:[--gutter-fade:var(--row-hover)];
|
|
@apply after:bg-[image:linear-gradient(to_right,var(--gutter-fade)_0%,color-mix(in_srgb,var(--gutter-fade)_85%,transparent)_25%,color-mix(in_srgb,var(--gutter-fade)_50%,transparent)_50%,color-mix(in_srgb,var(--gutter-fade)_15%,transparent)_75%,transparent_100%)];
|
|
}
|
|
|
|
@utility code-line-content {
|
|
@apply min-h-5 leading-5 pl-3 pr-18 group-hover/row:bg-[var(--row-hover)];
|
|
}
|
|
|
|
/* Code blocks need margin applied when in content container */
|
|
.prose :where(.shiki, .shiki-wrapper):where(:not(.shiki-wrapper *)) {
|
|
margin-block: 2rem;
|
|
}
|
|
|
|
/* Code block theme colors for use with Supabase Theme */
|
|
[data-theme='dark'],
|
|
.dark {
|
|
--code-token-keyword: #bda4ff;
|
|
--code-foreground: #ffffff;
|
|
--code-token-constant: #3ecf8e;
|
|
--code-token-string: #ffcda1;
|
|
--code-token-comment: #949494;
|
|
--code-token-parameter: #ffffff;
|
|
--code-token-function: #3ecf8e;
|
|
--code-token-string-expression: #ffcda1;
|
|
--code-token-punctuation: #ffffff;
|
|
--code-token-link: #ffffff;
|
|
--code-token-number: #ffffff;
|
|
--code-token-property: #3ecf8e;
|
|
--code-token-variable: var(--code-foreground);
|
|
--code-highlight-color: #232323;
|
|
--shadow-codeblock:
|
|
0 0 0 0 var(--border-default), 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
|
--drop-shadow-codeblock: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
|
|
}
|
|
[data-theme='light'],
|
|
.light {
|
|
--shadow-codeblock: 0 0 #0000;
|
|
--code-token-keyword: #5f2fc4;
|
|
--code-foreground: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-constant: #15593b;
|
|
--code-token-string: #9a5200;
|
|
--code-token-comment: #6a6a6a;
|
|
--code-token-parameter: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-function: #15593b;
|
|
--code-token-string-expression: #9a5200;
|
|
--code-token-punctuation: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-link: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-number: oklch(from var(--foreground-light) l c h / 1);
|
|
--code-token-property: #15593b;
|
|
--code-token-variable: var(--code-foreground);
|
|
--code-highlight-color: #1c1c1c;
|
|
}
|
|
|
|
/* Token classes emitted by CodeBlock.utils.ts */
|
|
.shiki .s-f {
|
|
color: var(--code-foreground);
|
|
}
|
|
.shiki .s-c {
|
|
color: var(--code-token-comment);
|
|
}
|
|
.shiki .s-n {
|
|
color: var(--code-token-constant);
|
|
}
|
|
.shiki .s-u {
|
|
color: var(--code-token-function);
|
|
}
|
|
.shiki .s-k {
|
|
color: var(--code-token-keyword);
|
|
}
|
|
.shiki .s-a {
|
|
color: var(--code-token-parameter);
|
|
}
|
|
.shiki .s-r {
|
|
color: var(--code-token-property);
|
|
}
|
|
.shiki .s-p {
|
|
color: var(--code-token-punctuation);
|
|
}
|
|
.shiki .s-s {
|
|
color: var(--code-token-string);
|
|
}
|
|
.shiki .s-e {
|
|
color: var(--code-token-string-expression);
|
|
}
|
|
.shiki .s-v {
|
|
color: var(--code-token-variable);
|
|
}
|
|
.shiki .s-i {
|
|
font-style: italic;
|
|
}
|
|
.shiki .s-b {
|
|
font-weight: bold;
|
|
}
|
|
.shiki .s-l {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Word wrap styles for code blocks */
|
|
.shiki[data-wrapped='true'] .code-scroll {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.shiki[data-wrapped='true'] .code-content {
|
|
white-space: pre-wrap !important;
|
|
overflow-wrap: anywhere !important;
|
|
}
|
|
|
|
.shadow-codeblock {
|
|
box-shadow: var(--shadow-codeblock, none);
|
|
}
|
|
|
|
.shiki-wrapper {
|
|
--tab-flare-ring:
|
|
transparent 6.75px, var(--border-color-default) 7.25px, var(--border-color-default) 7.75px,
|
|
transparent 8.25px;
|
|
--tab-flare-fill: transparent 6.75px, var(--background-color-200) 7.25px;
|
|
--tab-flare-left:
|
|
radial-gradient(circle at 0 0, var(--tab-flare-ring)),
|
|
radial-gradient(circle at 0 0, var(--tab-flare-fill));
|
|
--tab-flare-right:
|
|
radial-gradient(circle at 100% 0, var(--tab-flare-ring)),
|
|
radial-gradient(circle at 100% 0, var(--tab-flare-fill));
|
|
}
|
|
|
|
.codeblock-drop-shadow {
|
|
filter: var(--drop-shadow-codeblock, none);
|
|
}
|
|
|
|
.code-sample-source :is(.shiki, .code-sample-surface) {
|
|
mask:
|
|
linear-gradient(#000 0 0),
|
|
var(--source-notch-mask) right -2px bottom -2px / var(--source-notch-mask-width) 42px no-repeat;
|
|
mask-composite: exclude;
|
|
mask-clip: no-clip;
|
|
}
|