Skip to content

Commit 4a0143a

Browse files
zhangmo8zhangmo8
committed
style: move to cm.css
1 parent 9218e8b commit 4a0143a

File tree

3 files changed

+46
-104
lines changed

3 files changed

+46
-104
lines changed

‎src/components/Editor/CodeMirror/styles.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,46 @@ html[data-kb-theme="dark"] {
7878
.sub_title {
7979
color: hsl(var(--muted-foreground));
8080
}
81+
82+
.cm-scroller::-webkit-scrollbar {
83+
width: 8px;
84+
height: 8px;
85+
}
86+
87+
.full-scrolls .cm-scroller,
88+
.scrolls {
89+
overflow: auto !important;
90+
height: calc(100vh - 2px) !important;
91+
scrollbar-width: thin;
92+
scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
93+
}
94+
.scrolls-sidebar {
95+
height: calc(100vh - 25px - 1.5rem - 65px - 1rem - 2px) !important;
96+
}
97+
.overview-scrolls .cm-scroller {
98+
--use-overview-scrolls: var(
99+
--overview-scrolls,
100+
calc(100vh - 116px - 1rem - 61px - 1rem - 2px)
101+
);
102+
height: var(--use-overview-scrolls) !important;
103+
}
104+
.module-scrolls .cm-scroller {
105+
--use-module-scrolls: var(--module-scrolls, calc(100vh - 41px - 2.5rem));
106+
height: var(--use-module-scrolls) !important;
107+
}
108+
.repl-scrolls .cm-scroller {
109+
--use-repl-scrolls: var(--repl-scrolls, calc(100vh - 41px - 2.5rem));
110+
height: var(--use-repl-scrolls) !important;
111+
}
112+
113+
.cm-scroller::-webkit-scrollbar-track {
114+
background: var(--cm-ttc-c-track);
115+
}
116+
.cm-scroller::-webkit-scrollbar-thumb {
117+
background-color: var(--cm-ttc-c-thumb);
118+
border-radius: 3px;
119+
border: 2px solid var(--cm-ttc-c-thumb);
120+
}
121+
.cm-scroller::-webkit-scrollbar-corner {
122+
background-color: var(--cm-ttc-c-track);
123+
}

‎src/components/Output/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
align-items: center;
1010
gap: 4px;
1111

12-
border-bottom: 1px solid var(--repl-border-color);
12+
border-bottom: 1px solid var(--repl-divider-color);
1313
padding: 5px;
1414
}
1515

‎src/repl.css

Lines changed: 2 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,12 @@ grammarly-desktop-integration {
1313
display: none !important;
1414
}
1515

16-
.cm-editor {
17-
height: 100% !important;
18-
width: 100% !important;
19-
font-family: inherit;
20-
}
21-
.cm-content {
22-
cursor: text !important;
23-
}
24-
2516
:root {
2617
/* Base Colors */
27-
--repl-primary-color: #1890ff;
28-
--repl-primary-hover: #40a9ff;
18+
--repl-primary-color: #1e9dbc;
19+
--repl-primary-hover: #58c4dc;
2920

3021
/* UI Colors */
31-
--repl-border-color: #333;
3222
--repl-divider-color: #e0e0e0;
3323

3424
/* Text Colors */
@@ -39,95 +29,4 @@ grammarly-desktop-integration {
3929
--repl-bg-primary: #fdfdfd;
4030
--repl-bg-secondary: #f5f5f5;
4131
--repl-bg-hover: rgba(0, 0, 0, 0.04);
42-
43-
--cm-font-family: "Fira Code", monospace;
44-
--cm-foreground: #393a3480;
45-
--cm-background: #fdfdfd;
46-
--cm-tooltip-background: #fff;
47-
--cm-comment: #a0ada0;
48-
--cm-string: #b56959;
49-
--cm-number: #296aa3;
50-
--cm-variable: #59873a;
51-
--cm-keyword: #1c6b48;
52-
--cm-property: #b58451;
53-
--cm-definition-keyword: #ab5959;
54-
--cm-punctuation: #8e8f8b;
55-
--cm-decorator: #b07d48;
56-
--cm-line-highlight-background: #c9c9c910;
57-
--cm-line-highlight-border: #b0b0b030;
58-
--cm-selection-background: #eeeeee;
59-
/* scrollbars colors */
60-
--cm-ttc-c-thumb: #eee;
61-
--cm-ttc-c-track: white;
62-
}
63-
64-
html.dark {
65-
--cm-scheme: dark;
66-
--cm-foreground: #d4cfbf80;
67-
--cm-background: #121212;
68-
--cm-tooltip-background: #242222;
69-
--cm-comment: #758575;
70-
--cm-string: #d48372;
71-
--cm-keyword: #4d9375;
72-
--cm-number: #6394bf;
73-
--cm-variable: #c2b36e;
74-
--cm-property: #dd8e6e;
75-
--cm-definition-keyword: #cb7676;
76-
--cm-punctuation: #858585;
77-
--cm-decorator: #bd976a;
78-
--cm-line-number: #dedcd530;
79-
--cm-line-number-gutter: #eeeeee;
80-
--cm-line-highlight-background: #4d4d4d29;
81-
--cm-line-highlight-border: #3a3a3a80;
82-
--cm-selection-background: #242424;
83-
/* scrollbars colors */
84-
--cm-ttc-c-thumb: #222;
85-
--cm-ttc-c-track: #111;
86-
}
87-
88-
.highlighted,
89-
.highlighted > span {
90-
border-bottom: 1px dashed currentColor;
91-
}
92-
.cm-scroller::-webkit-scrollbar {
93-
width: 8px;
94-
height: 8px;
95-
}
96-
97-
.full-scrolls .cm-scroller,
98-
.scrolls {
99-
overflow: auto !important;
100-
height: calc(100vh - 2px) !important;
101-
scrollbar-width: thin;
102-
scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
103-
}
104-
.scrolls-sidebar {
105-
height: calc(100vh - 25px - 1.5rem - 65px - 1rem - 2px) !important;
106-
}
107-
.overview-scrolls .cm-scroller {
108-
--use-overview-scrolls: var(
109-
--overview-scrolls,
110-
calc(100vh - 116px - 1rem - 61px - 1rem - 2px)
111-
);
112-
height: var(--use-overview-scrolls) !important;
113-
}
114-
.module-scrolls .cm-scroller {
115-
--use-module-scrolls: var(--module-scrolls, calc(100vh - 41px - 2.5rem));
116-
height: var(--use-module-scrolls) !important;
117-
}
118-
.repl-scrolls .cm-scroller {
119-
--use-repl-scrolls: var(--repl-scrolls, calc(100vh - 41px - 2.5rem));
120-
height: var(--use-repl-scrolls) !important;
121-
}
122-
123-
.cm-scroller::-webkit-scrollbar-track {
124-
background: var(--cm-ttc-c-track);
125-
}
126-
.cm-scroller::-webkit-scrollbar-thumb {
127-
background-color: var(--cm-ttc-c-thumb);
128-
border-radius: 3px;
129-
border: 2px solid var(--cm-ttc-c-thumb);
130-
}
131-
.cm-scroller::-webkit-scrollbar-corner {
132-
background-color: var(--cm-ttc-c-track);
13332
}

0 commit comments

Comments
 (0)