-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.scss
99 lines (88 loc) · 4.54 KB
/
main.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
@use 'mixins';
.json-editor {
--font-base: var(--json-editor-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
--font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
// basic colors
--color-base: var(--json-editor-color-base, hsl(0 0% 13%));
--color-input-empty: var(--json-editor-color-input-empty, hsl(0 0% 78%));
--color-input-hover: var(--json-editor-color-input-active, hsla(0 0% 0% / 6%));
--color-focus: var(--json-editor-color-focus, hsl(10, 95%, 54%));
--color-count: var(--json-editor-color-count, hsl(0 0% 67%));
--color-bullet: var(--json-editor-color-bullet, hsl(0 0% 13%));
--color-tree: var(--json-editor-color-tree, hsl(0 0% 67%));
--color-null: var(--json-editor-color-null, hsl(0 0% 72%));
// types
--object: var(--json-editor-object, hsl(168 73% 43%));
--array: var(--json-editor-array, hsl(191 75% 53%));
--string: var(--json-editor-string, hsl(5 87% 59%));
--number: var(--json-editor-number, hsl(33 89% 55%));
--boolean: var(--json-editor-boolean, hsl(45 89% 54%));
--null: var(--json-editor-null, hsl(0 0% 58%));
// drag
--color-drag-target-bg: var(--json-editor-color-drag-target-bg, hsla(0 0% 0% / 6%));
--color-drag-line: var(--json-editor-color-drag-line, hsl(0 0% 65%));
// switch
--switch-bg: var(--json-editor-switch-bg, hsla(0 0% 100% / 0%));
--switch-outline: var(--json-editor-switch-outline, hsl(0 0% 67%));
--switch-outline-active: var(--json-editor-switch-outline-active, hsla(0 0% 67% / 50%));
--switch-ball: var(--json-editor-switch-ball, hsl(0 0% 56%));
--switch-ball-active: var(--json-editor-switch-ball-active, hsl(0 0% 13%));
// context
--context-color-bg: var(--json-editor-context-color-bg, hsl(0 0% 100%));
--context-color-inner: var(--json-editor-context-color-inner, hsl(0 0% 88%));
--context-color-active: var(--json-editor-context-color-active, hsl(0 0% 92%));
--context-color-remove: var(--json-editor-context-color-remove, hsl(0 96% 52%));
--context-color-text: var(--json-editor-context-color-text, hsl(0 0% 13%));
--context-color-bullet: var(--json-editor-context-color-bullet, hsl(0 0% 13%));
--context-shadow: var(--json-editor-context-shadow, 0 4px 36px 0 hsla(0 0% 0% / 12%), 0 2px 12px 0 hsla(0 0% 0% / 20%), 0 0 0 1px hsla(0 0% 0% / 8%));
--context-radius: var(--json-editor-radius, 2px);
color: var(--color-base);
font-size: 16px;
line-height: 1.15;
&, button, input, select {
font-family: var(--font-base);
}
> ul {
position: relative;
margin: -4px 0;
padding: 0;
list-style: none;
}
&.dragging {
cursor: move;
user-select: none;
* {
cursor: move !important;
user-select: none !important;
}
}
@include mixins.dark-mode(true) {
// basic colors
--color-base: var(--json-editor-color-base, hsl(0 0% 92%));
--color-input-empty: var(--json-editor-color-input-empty, hsl(0 0% 48%));
--color-input-hover: var(--json-editor-color-input-active, hsla(0 0% 100% / 12%));
--color-count: var(--json-editor-color-count, hsl(0 0% 56%));
--color-bullet: var(--json-editor-color-bullet, hsl(0 0% 92%));
--color-tree: var(--json-editor-color-tree, hsl(0 0% 42%));
--color-null: var(--json-editor-color-null, hsl(0 0% 48%));
// drag
--color-drag-target-bg: var(--json-editor-color-drag-target-bg, hsla(0 0% 100% / 8%));
--color-drag-line: var(--json-editor-color-drag-line, hsl(0 0% 75%));
// switch
--switch-bg: var(--json-editor-switch-bg, hsla(0 0% 0% / 0%));
--switch-outline: var(--json-editor-switch-outline, hsl(0 0% 78%));
--switch-outline-active: var(--json-editor-switch-outline-active, hsla(0 0% 62% / 50%));
--switch-ball: var(--json-editor-switch-ball, hsl(0 0% 54%));
--switch-ball-active: var(--json-editor-switch-ball-active, hsl(0 0% 100%));
// context
--context-color-bg: var(--json-editor-context-color-bg, hsl(0 0% 24%));
--context-color-inner: var(--json-editor-context-color-inner, hsl(0 0% 16%));
--context-color-active: var(--json-editor-context-color-active, hsl(0 0% 36%));
--context-color-remove: var(--json-editor-context-color-remove, hsl(0 98% 60%));
--context-color-text: var(--json-editor-context-color-text, hsl(0 0% 92%));
--context-color-bullet: var(--json-editor-context-color-bullet, hsl(0 0% 92%));
--context-shadow: var(--json-editor-context-shadow, 0 4px 36px 0 hsla(0 0% 0% / 32%), 0 2px 8px 0 hsla(0 0% 0% / 52%), 0 0 0 1px hsla(0 0% 0% / 75%));
}
@import 'node';
@import 'context';
}