mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
fix(editor): Dark mode sticky notes (no-changelog) (#7716)
This commit is contained in:
Giulio Andreini
GitHub
parent
4020c14d59
commit
0cebd28582
|
|
@ -320,13 +320,13 @@ export default defineComponent({
|
|||
code {
|
||||
background-color: var(--color-sticky-code-background);
|
||||
padding: 0 var(--spacing-4xs);
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-sticky-code-font);
|
||||
}
|
||||
|
||||
pre > code,
|
||||
li > code,
|
||||
p > code {
|
||||
color: var(--color-secondary);
|
||||
color: var(--color-sticky-code-font);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -201,6 +201,18 @@ export default defineComponent({
|
|||
.sticky {
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-base);
|
||||
|
||||
background-color: var(--color-sticky-background);
|
||||
border: 1px solid var(--color-sticky-border);
|
||||
|
||||
.wrapper::after {
|
||||
opacity: 0.15;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky-background) 0.01%,
|
||||
var(--color-sticky-border)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.clickable {
|
||||
|
|
@ -231,98 +243,34 @@ export default defineComponent({
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.color-1 {
|
||||
background-color: var(--sticky-color-1);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-1));
|
||||
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-1)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-1))
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.color-2 {
|
||||
background-color: var(--sticky-color-2);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-2));
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-2)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-2))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-2);
|
||||
--color-sticky-border: var(--color-sticky-border-2);
|
||||
}
|
||||
|
||||
.color-3 {
|
||||
background-color: var(--sticky-color-3);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-3));
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-3)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-3))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-3);
|
||||
--color-sticky-border: var(--color-sticky-border-3);
|
||||
}
|
||||
|
||||
.color-4 {
|
||||
background-color: var(--sticky-color-4);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-4));
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-4)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-4))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-4);
|
||||
--color-sticky-border: var(--color-sticky-border-4);
|
||||
}
|
||||
|
||||
.color-5 {
|
||||
background-color: var(--sticky-color-5);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-5));
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-5)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-5))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-5);
|
||||
--color-sticky-border: var(--color-sticky-border-5);
|
||||
}
|
||||
|
||||
.color-6 {
|
||||
background-color: var(--sticky-color-6);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-6));
|
||||
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-6)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-6))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-6);
|
||||
--color-sticky-border: var(--color-sticky-border-6);
|
||||
}
|
||||
|
||||
.color-7 {
|
||||
background-color: var(--sticky-color-7);
|
||||
border: 1px solid var(--color-sticky, var(--sticky-color-7));
|
||||
|
||||
.wrapper::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-sticky, var(--sticky-color-7)),
|
||||
#fff5d600 0.01%,
|
||||
var(--color-sticky, var(--sticky-color-7))
|
||||
);
|
||||
}
|
||||
--color-sticky-background: var(--color-sticky-background-7);
|
||||
--color-sticky-border: var(--color-sticky-border-7);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
|
||||
--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
|
||||
--prim-gray-70: hsl(var(--prim-gray-h), 32%, 93%);
|
||||
--prim-gray-70-alpha-01: hsla(var(--prim-gray-h), 32%, 93%, 0.1);
|
||||
--prim-gray-40: hsl(var(--prim-gray-h), 40%, 96%);
|
||||
--prim-gray-30: hsl(var(--prim-gray-h), 40%, 97%);
|
||||
--prim-gray-10: hsl(var(--prim-gray-h), 47%, 99%);
|
||||
|
|
@ -71,6 +72,11 @@
|
|||
--prim-color-secondary-s: 49%;
|
||||
--prim-color-secondary-l: 53%;
|
||||
|
||||
--prim-color-secondary-shade-250: hsl(
|
||||
var(--prim-color-secondary-h),
|
||||
calc(var(--prim-color-secondary-s) - 25%),
|
||||
calc(var(--prim-color-secondary-l) - 25%)
|
||||
);
|
||||
--prim-color-secondary-shade-100: hsl(
|
||||
var(--prim-color-secondary-h),
|
||||
var(--prim-color-secondary-s),
|
||||
|
|
@ -113,9 +119,14 @@
|
|||
--prim-color-alt-a-s: 60%;
|
||||
--prim-color-alt-a-l: 40%;
|
||||
|
||||
--prim-color-alt-a-shade-200: hsl(
|
||||
var(--prim-color-alt-a-h),
|
||||
calc(var(--prim-color-alt-a-s) - 15%),
|
||||
calc(var(--prim-color-alt-a-l) - 20%)
|
||||
);
|
||||
--prim-color-alt-a-shade-100: hsl(
|
||||
var(--prim-color-alt-a-h),
|
||||
var(--prim-color-alt-a-s),
|
||||
calc(var(--prim-color-alt-a-s) - 15%),
|
||||
calc(var(--prim-color-alt-a-l) - 10%)
|
||||
);
|
||||
--prim-color-alt-a: hsl(
|
||||
|
|
@ -155,6 +166,16 @@
|
|||
--prim-color-alt-b-s: 77%;
|
||||
--prim-color-alt-b-l: 57%;
|
||||
|
||||
--prim-color-alt-b-shade-350: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
calc(var(--prim-color-alt-b-s) - 35%),
|
||||
calc(var(--prim-color-alt-b-l) - 35%)
|
||||
);
|
||||
--prim-color-alt-b-shade-250: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
calc(var(--prim-color-alt-b-s) - 35%),
|
||||
calc(var(--prim-color-alt-b-l) - 25%)
|
||||
);
|
||||
--prim-color-alt-b-shade-100: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
var(--prim-color-alt-b-s),
|
||||
|
|
@ -171,11 +192,21 @@
|
|||
var(--prim-color-alt-b-l),
|
||||
0.2
|
||||
);
|
||||
--prim-color-alt-b-tint-150: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
var(--prim-color-alt-b-s),
|
||||
calc(var(--prim-color-alt-b-l) + 15%)
|
||||
);
|
||||
--prim-color-alt-b-tint-250: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
var(--prim-color-alt-b-s),
|
||||
calc(var(--prim-color-alt-b-l) + 25%)
|
||||
);
|
||||
--prim-color-alt-b-tint-300: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
var(--prim-color-alt-b-s),
|
||||
calc(var(--prim-color-alt-b-l) + 30%)
|
||||
);
|
||||
--prim-color-alt-b-tint-400: hsl(
|
||||
var(--prim-color-alt-b-h),
|
||||
var(--prim-color-alt-b-s),
|
||||
|
|
@ -187,6 +218,16 @@
|
|||
--prim-color-alt-c-s: 83%;
|
||||
--prim-color-alt-c-l: 52%;
|
||||
|
||||
--prim-color-alt-c-shade-250: hsl(
|
||||
var(--prim-color-alt-c-h),
|
||||
calc(var(--prim-color-alt-c-s) - 40%),
|
||||
calc(var(--prim-color-alt-c-l) - 25%)
|
||||
);
|
||||
--prim-color-alt-c-shade-150: hsl(
|
||||
var(--prim-color-alt-c-h),
|
||||
calc(var(--prim-color-alt-c-s) - 40%),
|
||||
calc(var(--prim-color-alt-c-l) - 15%)
|
||||
);
|
||||
--prim-color-alt-c-shade-100: hsl(
|
||||
var(--prim-color-alt-c-h),
|
||||
var(--prim-color-alt-c-s),
|
||||
|
|
@ -213,6 +254,11 @@
|
|||
var(--prim-color-alt-c-s),
|
||||
calc(var(--prim-color-alt-c-l) + 25%)
|
||||
);
|
||||
--prim-color-alt-c-tint-300: hsl(
|
||||
var(--prim-color-alt-c-h),
|
||||
var(--prim-color-alt-c-s),
|
||||
calc(var(--prim-color-alt-c-l) + 30%)
|
||||
);
|
||||
--prim-color-alt-c-tint-400: hsl(
|
||||
var(--prim-color-alt-c-h),
|
||||
var(--prim-color-alt-c-s),
|
||||
|
|
@ -229,6 +275,16 @@
|
|||
--prim-color-alt-d-s: 100%;
|
||||
--prim-color-alt-d-l: 92%;
|
||||
|
||||
--prim-color-alt-d-shade-700: hsl(
|
||||
var(--prim-color-alt-d-h),
|
||||
calc(var(--prim-color-alt-d-s) - 55%),
|
||||
calc(var(--prim-color-alt-d-l) - 70%)
|
||||
);
|
||||
--prim-color-alt-d-shade-600: hsl(
|
||||
var(--prim-color-alt-d-h),
|
||||
calc(var(--prim-color-alt-d-s) - 55%),
|
||||
calc(var(--prim-color-alt-d-l) - 60%)
|
||||
);
|
||||
--prim-color-alt-d-shade-150: hsl(
|
||||
var(--prim-color-alt-d-h),
|
||||
var(--prim-color-alt-d-s),
|
||||
|
|
@ -245,6 +301,16 @@
|
|||
--prim-color-alt-e-s: 67%;
|
||||
--prim-color-alt-e-l: 57%;
|
||||
|
||||
--prim-color-alt-e-shade-350: hsl(
|
||||
var(--prim-color-alt-e-h),
|
||||
calc(var(--prim-color-alt-e-s) - 20%),
|
||||
calc(var(--prim-color-alt-e-l) - 35%)
|
||||
);
|
||||
--prim-color-alt-e-shade-250: hsl(
|
||||
var(--prim-color-alt-e-h),
|
||||
calc(var(--prim-color-alt-e-s) - 20%),
|
||||
calc(var(--prim-color-alt-e-l) - 25%)
|
||||
);
|
||||
--prim-color-alt-e-shade-150: hsl(
|
||||
var(--prim-color-alt-e-h),
|
||||
var(--prim-color-alt-e-s),
|
||||
|
|
@ -266,6 +332,16 @@
|
|||
var(--prim-color-alt-e-l),
|
||||
0.4
|
||||
);
|
||||
--prim-color-alt-e-tint-250: hsl(
|
||||
var(--prim-color-alt-e-h),
|
||||
var(--prim-color-alt-e-s),
|
||||
calc(var(--prim-color-alt-e-l) + 25%)
|
||||
);
|
||||
--prim-color-alt-e-tint-350: hsl(
|
||||
var(--prim-color-alt-e-h),
|
||||
var(--prim-color-alt-e-s),
|
||||
calc(var(--prim-color-alt-e-l) + 35%)
|
||||
);
|
||||
|
||||
// Color Alternate F
|
||||
--prim-color-alt-f-h: 72;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,26 @@
|
|||
--node-type-main-color: var(--prim-gray-420);
|
||||
|
||||
// Sticky
|
||||
--color-sticky-code-background: var(--prim-gray-40);
|
||||
--color-sticky-background: var(--prim-color-alt-d-shade-700);
|
||||
--color-sticky-border: var(--prim-color-alt-d-shade-600);
|
||||
--color-sticky-font: var(--prim-gray-40);
|
||||
--color-sticky-code-font: var(--prim-color-secondary-tint-300);
|
||||
--color-sticky-code-background: var(--prim-gray-70-alpha-01);
|
||||
|
||||
--color-sticky-background-1: var(--prim-color-alt-d-shade-700);
|
||||
--color-sticky-border-1: var(--prim-color-alt-d-shade-600);
|
||||
--color-sticky-background-2: var(--prim-color-alt-b-shade-350);
|
||||
--color-sticky-border-2: var(--prim-color-alt-b-shade-250);
|
||||
--color-sticky-background-3: var(--prim-color-alt-c-shade-250);
|
||||
--color-sticky-border-3: var(--prim-color-alt-c-shade-150);
|
||||
--color-sticky-background-4: var(--prim-color-alt-a-shade-200);
|
||||
--color-sticky-border-4: var(--prim-color-alt-a-shade-100);
|
||||
--color-sticky-background-5: var(--prim-color-alt-e-shade-350);
|
||||
--color-sticky-border-5: var(--prim-color-alt-e-shade-250);
|
||||
--color-sticky-background-6: var(--prim-color-secondary-shade-250);
|
||||
--color-sticky-border-6: var(--prim-color-secondary-shade-100);
|
||||
--color-sticky-background-7: var(--prim-gray-740);
|
||||
--color-sticky-border-7: var(--prim-gray-670);
|
||||
|
||||
// Expressions
|
||||
--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
|
||||
|
|
|
|||
|
|
@ -74,18 +74,26 @@
|
|||
--node-type-main-color: var(--prim-gray-490);
|
||||
|
||||
// Sticky
|
||||
--color-sticky-default-background: var(--prim-color-alt-d);
|
||||
--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
|
||||
--color-sticky-background: var(--prim-color-alt-d);
|
||||
--color-sticky-border: var(--prim-color-alt-d-shade-150);
|
||||
--color-sticky-font: var(--prim-gray-740);
|
||||
--color-sticky-code-font: var(--color-secondary);
|
||||
--color-sticky-code-background: var(--color-background-base);
|
||||
|
||||
--sticky-color-7: #f0f3f9;
|
||||
--sticky-color-6: #e7d6ff;
|
||||
--sticky-color-5: #d6ebff;
|
||||
--sticky-color-4: #dcf9eb;
|
||||
--sticky-color-3: #fbdadd;
|
||||
--sticky-color-2: #fde9d8;
|
||||
--sticky-color-1: #fff5d6;
|
||||
--color-sticky-background-1: var(--color-sticky-background);
|
||||
--color-sticky-border-1: var(--color-sticky-border);
|
||||
--color-sticky-background-2: var(--prim-color-alt-b-tint-300);
|
||||
--color-sticky-border-2: var(--prim-color-alt-b-tint-150);
|
||||
--color-sticky-background-3: var(--prim-color-alt-c-tint-400);
|
||||
--color-sticky-border-3: var(--prim-color-alt-c-tint-300);
|
||||
--color-sticky-background-4: var(--prim-color-alt-a-tint-500);
|
||||
--color-sticky-border-4: var(--prim-color-alt-a-tint-300);
|
||||
--color-sticky-background-5: var(--prim-color-alt-e-tint-350);
|
||||
--color-sticky-border-5: var(--prim-color-alt-e-tint-250);
|
||||
--color-sticky-background-6: var(--prim-color-secondary-tint-400);
|
||||
--color-sticky-border-6: var(--prim-color-secondary-tint-300);
|
||||
--color-sticky-background-7: var(--prim-gray-10);
|
||||
--color-sticky-border-7: var(--prim-gray-120);
|
||||
|
||||
// Expressions
|
||||
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="gray">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
|
||||
template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -31,7 +31,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="primary">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -44,7 +44,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="secondary">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -57,7 +57,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="alternate-a">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -70,7 +70,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="alternate-b">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-400']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -83,7 +83,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="alternate-c">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -96,7 +96,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="alternate-d">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
@ -109,7 +109,7 @@ import ColorCircles from './ColorCircles.vue';
|
|||
<Canvas>
|
||||
<Story name="alternate-e">
|
||||
{{
|
||||
template: `<color-circles :colors="['--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e']" />`,
|
||||
template: `<color-circles :colors="['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']" />`,
|
||||
components: {
|
||||
ColorCircles,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -82,12 +82,12 @@
|
|||
:style="{
|
||||
'border-width': '1px',
|
||||
'border-style': 'solid',
|
||||
'border-color': 'var(--color-text-dark)',
|
||||
'background-color': `var(--sticky-color-${index + 1})`,
|
||||
'border-color': 'var(--color-foreground-xdark)',
|
||||
'background-color': `var(--color-sticky-background-${index + 1})`,
|
||||
'box-shadow':
|
||||
(index === 0 && node?.parameters.color === '') ||
|
||||
index + 1 === node?.parameters.color
|
||||
? `0 0 0 1px var(--sticky-color-${index + 1})`
|
||||
? `0 0 0 1px var(--color-sticky-background-${index + 1})`
|
||||
: 'none',
|
||||
}"
|
||||
></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue