chore: refactored theme css
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Jan 19, 2024 at 17:32 UTC
fc6cc0d94d9ec6a39b7ff6faad59e9d9ff882c98
4 files changed
+273
-303
src/config/extensions/default_themes/themes/default_dark.json
+107
-93
@@ -2,98 +2,112 @@
2
"theme-name": "Dark",
3
"author": "mellobacon",
4
"theme": {
5
- "window": {
6
- "foreground": "#ffffff",
7
- "background": "#171717",
8
- "borderColor": "#414040",
9
- "accent": "#376ba3",
10
- "dropdownBackground": "#2D2D2D",
11
- "dropdownButtonBackground": "#2D2D2D",
12
- "dropdownButtonForeground": "#ffffff",
13
- "dropdownButtonHoverForeground": "#ffffff",
14
- "dropdownItemHoverBackground": "#414040",
15
- "dropdownItemHoverForeground": "#ffffff",
16
- "inputBackground": "#333",
17
- "inputForeground": "#ffffff",
18
- "inputBorder": "#6f6f6f",
19
- "inputFocusBorder": "#34b0f8",
20
- "inputLabelForeground": "#c6c6c6",
21
- "scrollbarBackground": "#4c4c4c38",
22
- "inputPlaceholderForeground": "#8C8C8C",
23
- "selectBackground": "#1f1f1f",
24
- "selectButtonBackground": "#333",
25
- "selectButtonForeground": "#ffffff",
26
- "selectItemHoverBackground": "#373737",
27
- "selectItemHoverForeground": "#ffffff",
28
- "buttonBackground": "#222222",
29
- "buttonForeground": "#ffffff",
30
- "buttonHoverBackground": "#323232",
31
- "buttonHoverForeground": "#ffffff",
32
- "boxShadow": "#000000cc",
33
- "menuShortcutForeground": "#8c8c8c",
34
- "disabledTextForeground": "#6b6b6b",
35
- "invalidTextForeground": "#fa4d56",
36
- "readonlyTextForeground": "#2d2d2d",
37
- "linkForeground": "#939393",
38
- "linkHoverForeground": "#4d73ad",
39
- "descriptionForeground": "#939393"
40
- },
41
- "header": {
42
- "background": "#2D2D2D",
43
- "foreground": "#ffffff",
44
- "buttonHoverBackground": "#414040",
45
- "borderColor": "#1d1d1d"
46
- },
47
- "sidebar": {
48
- "background": "#171717",
49
- "foreground": "#ffffff",
50
- "tabHoverBackground": "#363636",
51
- "tabHoverForeground": "#ffffff",
52
- "tabActiveBackground": "#326ed6",
53
- "tabActiveForeground": "#ffffff",
54
- "tabActiveBorder": ""
55
- },
56
- "statusbar": {
57
- "background": "#171717",
58
- "foreground": "#8c8c8c",
59
- "buttonBackgroundHover": "#414040",
60
- "buttonForegroundHover": "#ffffff"
61
- },
62
- "editor": {
63
- "background": "#171717",
64
- "foreground": "#e7e7e7",
65
- "tabContainerBackground": "#2D2D2D",
66
- "tabBackground": "#1c1c1c",
67
- "tabForeground": "#ffffff",
68
- "tabBorderColor": "#414040",
69
- "tabActiveBorderColor": "#34b0f8",
70
- "tabActiveBackground": "#171717",
71
- "tabActiveForeground": "#ffffff",
72
- "tabHoverBackground": "2b2b2b",
73
- "tabHoverForeground": "#ffffff",
74
- "tabSaveStateColor": "#ffffff",
75
- "gutterForeground": "#898989",
76
- "gutterActiveForeground": "#ffffff",
77
- "gutterActiveBackground": "#212121",
78
- "activeLineBackground": "#212121",
79
- "activeLineBorder": ""
80
- },
81
- "filetree": {
82
- "treeNodeBackground": "",
83
- "treeNodeForeground": "#808080",
84
- "treeNodeHoverBackground": "#353535",
85
- "treeNodeHoverForeground": "#ffffff",
86
- "treeNodeSelectedBackground": "#353535",
87
- "treeNodeSelectedForeground": "#34b0f8"
88
- },
89
- "modal": {
90
- "background": "#fdfdfd",
91
- "foreground": "#000000",
92
- "shadow": "#acacac50",
93
- "buttonBackground": "#2276b2",
94
- "buttonForeground": "#f9f9f9",
95
- "buttonHoverBackground": "#1c88d4",
96
- "buttonHoverForeground": "#000000"
97
- }
5
+ "window.foreground": "#ffffff",
6
+ "window.background": "#171717",
7
+ "window.borderColor": "#414040",
8
+ "window.accent": "#376ba3",
9
+
10
+ "window.menuBackground": "#2D2D2D",
11
+ "window.menuButtonBackground": "#2D2D2D",
12
+ "window.menuButtonForeground": "#ffffff",
13
+ "window.menuButtonHoverForeground": "#ffffff",
14
+ "window.menuItemHoverBackground": "#414040",
15
+ "window.menuItemHoverForeground": "#ffffff",
16
+
17
+ "window.inputBackground": "#333",
18
+ "window.inputForeground": "#ffffff",
19
+ "window.inputBorder": "#6f6f6f",
20
+ "window.inputFocusBorder": "#34b0f8",
21
+ "window.inputLabelForeground": "#c6c6c6",
22
+
23
+ "window.scrollbarBackground": "#4c4c4c38",
24
+ "window.inputPlaceholderForeground": "#8C8C8C",
25
+
26
+ "window.selectBackground": "#1f1f1f",
27
+ "window.selectButtonBackground": "#333",
28
+ "window.selectButtonForeground": "#ffffff",
29
+ "window.selectItemHoverBackground": "#373737",
30
+ "window.selectItemHoverForeground": "#ffffff",
31
+
32
+ "window.buttonBackground": "#222222",
33
+ "window.buttonForeground": "#ffffff",
34
+ "window.buttonHoverBackground": "#323232",
35
+ "window.buttonHoverForeground": "#ffffff",
36
+
37
+ "window.buttonSecondaryBackground": "#323232",
38
+ "window.buttonSecondaryForeground": "#ffffff",
39
+ "window.buttonSecondaryHoverBackground": "#494949",
40
+ "window.buttonSecondaryHoverForeground": "#ffffff",
41
+
42
+ "window.buttonAccentBackground": "#1258da",
43
+ "window.buttonAccentForeground": "#ffffff",
44
+ "window.buttonAccentHoverBackground": "#1b57c9",
45
+ "window.buttonAccentHoverForeground": "#ffffff",
46
+
47
+ "window.buttonDangerBackground": "#222222",
48
+ "window.buttonDangerForeground": "#ffffff",
49
+ "window.buttonDangerHoverBackground": "#323232",
50
+ "window.buttonDangerHoverForeground": "#ffffff",
51
+
52
+ "window.boxShadow": "#000000cc",
53
+ "window.menuShortcutForeground": "#8c8c8c",
54
+ "window.disabledTextForeground": "#6b6b6b",
55
+ "window.invalidTextForeground": "#fa4d56",
56
+ "window.readonlyTextForeground": "#2d2d2d",
57
+ "window.linkForeground": "#939393",
58
+ "window.linkHoverForeground": "#4d73ad",
59
+ "window.descriptionForeground": "#939393",
60
+ "window.actionButtonBackground": "",
61
+
62
+ "header.background": "#2D2D2D",
63
+ "header.foreground": "#ffffff",
64
+ "header.buttonHoverBackground": "#414040",
65
+ "header.borderColor": "#1d1d1d",
66
+
67
+ "sidebar.background": "#171717",
68
+ "sidebar.foreground": "#ffffff",
69
+ "sidebar.tabHoverBackground": "#363636",
70
+ "sidebar.tabHoverForeground": "#ffffff",
71
+ "sidebar.tabActiveBackground": "#326ed6",
72
+ "sidebar.tabActiveForeground": "#ffffff",
73
+ "sidebar.tabActiveBorder": "",
74
+
75
+ "statusbar.background": "#171717",
76
+ "statusbar.foreground": "#8c8c8c",
77
+ "statusbar.buttonBackgroundHover": "#414040",
78
+ "statusbar.buttonForegroundHover": "#ffffff",
79
+
80
+ "editor.background": "#171717",
81
+ "editor.foreground": "#e7e7e7",
82
+ "editor.tabContainerBackground": "#2D2D2D",
83
+ "editor.tabBackground": "#1c1c1c",
84
+ "editor.tabForeground": "#ffffff",
85
+ "editor.tabBorderColor": "#414040",
86
+ "editor.tabActiveBorderColor": "#34b0f8",
87
+ "editor.tabActiveBackground": "#171717",
88
+ "editor.tabActiveForeground": "#ffffff",
89
+ "editor.tabHoverBackground": "2b2b2b",
90
+ "editor.tabHoverForeground": "#ffffff",
91
+ "editor.tabSaveStateColor": "#ffffff",
92
+ "editor.gutterForeground": "#898989",
93
+ "editor.gutterActiveForeground": "#ffffff",
94
+ "editor.gutterActiveBackground": "#212121",
95
+ "editor.activeLineBackground": "#212121",
96
+ "editor.activeLineBorder": "",
97
+
98
+ "filetree.treeNodeBackground": "",
99
+ "filetree.treeNodeForeground": "#808080",
100
+ "filetree.treeNodeHoverBackground": "#353535",
101
+ "filetree.treeNodeHoverForeground": "#ffffff",
102
+ "filetree.treeNodeSelectedBackground": "#353535",
103
+ "filetree.treeNodeSelectedForeground": "#34b0f8",
104
+
105
+ "modal.background": "#262626",
106
+ "modal.foreground": "#ffffff",
107
+ "modal.shadow": "#00000085",
108
+ "modal.buttonBackground": "#2276b2",
109
+ "modal.buttonForeground": "#f9f9f9",
110
+ "modal.buttonHoverBackground": "#1c88d4",
111
+ "modal.buttonHoverForeground": "#f9f9f9"
112
}
113
}
src/config/extensions/default_themes/themes/default_light.json
+107
-93
@@ -2,98 +2,112 @@
2
"theme-name": "Light",
3
"author": "mellobacon",
4
"theme": {
5
- "window": {
6
- "foreground": "#505050",
7
- "background": "#FAFAFA",
8
- "borderColor": "#DDDDDD",
9
- "accent": "#0079AD",
10
- "dropdownBackground": "#E9E9E9",
11
- "dropdownButtonBackground": "#E9E9E9",
12
- "dropdownButtonForeground": "#4B4B4B",
13
- "dropdownButtonHoverForeground": "#d6d6d6",
14
- "dropdownItemHoverBackground": "#d6d6d6",
15
- "dropdownItemHoverForeground": "#000000",
16
- "inputBackground": "#E9E9E9",
17
- "inputForeground": "#505050",
18
- "inputBorder": "#D6D6D6",
19
- "inputFocusBorder": "#34b0f8",
20
- "inputLabelForeground": "#000000",
21
- "scrollbarBackground": "#4c4c4c38",
22
- "inputPlaceholderForeground": "#8C8C8C",
23
- "selectBackground": "#d6d6d6",
24
- "selectButtonBackground": "#DDDDDD",
25
- "selectButtonForeground": "#000000",
26
- "selectItemHoverBackground": "#e9e9e9",
27
- "selectItemHoverForeground": "#000000",
28
- "buttonBackground": "#e5e5e5",
29
- "buttonForeground": "#000000",
30
- "buttonHoverBackground": "#d3d3d3",
31
- "buttonHoverForeground": "#000000",
32
- "boxShadow": "#000000cc",
33
- "menuShortcutForeground": "#8c8c8c",
34
- "disabledTextForeground": "#6b6b6b",
35
- "invalidTextForeground": "#fa4d56",
36
- "readonlyTextForeground": "#2d2d2d",
37
- "linkForeground": "#939393",
38
- "linkHoverForeground": "#4d73ad",
39
- "descriptionForeground": "#939393"
40
- },
41
- "header": {
42
- "background": "#F0F0F0",
43
- "foreground": "#000000",
44
- "buttonHoverBackground": "#d6d6d6",
45
- "borderColor": "#d6d6d6"
46
- },
47
- "sidebar": {
48
- "background": "#FAFAFA",
49
- "foreground": "#000000",
50
- "tabHoverBackground": "#d3d3d3",
51
- "tabHoverForeground": "#000000",
52
- "tabActiveBackground": "#326ed6",
53
- "tabActiveForeground": "#ffffff",
54
- "tabActiveBorder": ""
55
- },
56
- "statusbar": {
57
- "background": "#FAFAFA",
58
- "foreground": "#000000",
59
- "buttonBackgroundHover": "#e9e9e9",
60
- "buttonForegroundHover": "#000000"
61
- },
62
- "editor": {
63
- "background": "#FAFAFA",
64
- "foreground": "#212121",
65
- "tabContainerBackground": "#2D2D2D",
66
- "tabBackground": "#F0F0F0",
67
- "tabForeground": "#000000",
68
- "tabBorderColor": "#DDDDDD",
69
- "tabActiveBorderColor": "#34b0f8",
70
- "tabActiveBackground": "#FAFAFA",
71
- "tabActiveForeground": "#212121",
72
- "tabHoverBackground": "#e9e9e9",
73
- "tabHoverForeground": "#212121",
74
- "tabSaveStateColor": "#000000",
75
- "gutterForeground": "#6E6E6E",
76
- "gutterActiveForeground": "#000000",
77
- "gutterActiveBackground": "#7e7e7e2b",
78
- "activeLineBackground": "#7e7e7e2b",
79
- "activeLineBorder": ""
80
- },
81
- "filetree": {
82
- "treeNodeBackground": "",
83
- "treeNodeForeground": "#3D3D3D",
84
- "treeNodeHoverBackground": "#d6d6d6",
85
- "treeNodeHoverForeground": "#000000",
86
- "treeNodeSelectedBackground": "#C1C1C1",
87
- "treeNodeSelectedForeground": "#000000"
88
- },
89
- "modal": {
90
- "background": "#fdfdfd",
91
- "foreground": "#000000",
92
- "shadow": "#acacac50",
93
- "buttonBackground": "#2276b2",
94
- "buttonForeground": "#f9f9f9",
95
- "buttonHoverBackground": "#1c88d4",
96
- "buttonHoverForeground": "#f9f9f9"
97
- }
5
+ "window.foreground": "#505050",
6
+ "window.background": "#FAFAFA",
7
+ "window.borderColor": "#DDDDDD",
8
+ "window.accent": "#0079AD",
9
+
10
+ "window.menuBackground": "#E9E9E9",
11
+ "window.menuButtonBackground": "#E9E9E9",
12
+ "window.menuButtonForeground": "#4B4B4B",
13
+ "window.menuButtonHoverForeground": "#d6d6d6",
14
+ "window.menuItemHoverBackground": "#d6d6d6",
15
+ "window.menuItemHoverForeground": "#000000",
16
+
17
+ "window.inputBackground": "#E9E9E9",
18
+ "window.inputForeground": "#505050",
19
+ "window.inputBorder": "#D6D6D6",
20
+ "window.inputFocusBorder": "#34b0f8",
21
+ "window.inputLabelForeground": "#000000",
22
+
23
+ "window.scrollbarBackground": "#4c4c4c38",
24
+ "window.inputPlaceholderForeground": "#8C8C8C",
25
+
26
+ "window.selectBackground": "#d6d6d6",
27
+ "window.selectButtonBackground": "#DDDDDD",
28
+ "window.selectButtonForeground": "#000000",
29
+ "window.selectItemHoverBackground": "#e9e9e9",
30
+ "window.selectItemHoverForeground": "#000000",
31
+
32
+ "window.buttonBackground": "#e5e5e5",
33
+ "window.buttonForeground": "#000000",
34
+ "window.buttonHoverBackground": "#d3d3d3",
35
+ "window.buttonHoverForeground": "#000000",
36
+
37
+ "window.buttonSecondaryBackground": "#b5b5b5",
38
+ "window.buttonSecondaryForeground": "#000000",
39
+ "window.buttonSecondaryHoverBackground": "#d2d2d2",
40
+ "window.buttonSecondaryHoverForeground": "#000000",
41
+
42
+ "window.buttonAccentBackground": "#3572e3",
43
+ "window.buttonAccentForeground": "#ffffff",
44
+ "window.buttonAccentHoverBackground": "#1b57c9",
45
+ "window.buttonAccentHoverForeground": "#ffffff",
46
+
47
+ "window.buttonDangerBackground": "#222222",
48
+ "window.buttonDangerForeground": "#ffffff",
49
+ "window.buttonDangerHoverBackground": "#323232",
50
+ "window.buttonDangerHoverForeground": "#ffffff",
51
+
52
+ "window.boxShadow": "#000000cc",
53
+ "window.menuShortcutForeground": "#8c8c8c",
54
+ "window.disabledTextForeground": "#6b6b6b",
55
+ "window.invalidTextForeground": "#fa4d56",
56
+ "window.readonlyTextForeground": "#2d2d2d",
57
+ "window.linkForeground": "#939393",
58
+ "window.linkHoverForeground": "#4d73ad",
59
+ "window.descriptionForeground": "#939393",
60
+
61
+ "header.background": "#F0F0F0",
62
+ "header.foreground": "#000000",
63
+ "header.buttonHoverBackground": "#d6d6d6",
64
+ "header.borderColor": "#d6d6d6",
65
+
66
+ "sidebar.background": "#FAFAFA",
67
+ "sidebar.foreground": "#000000",
68
+ "sidebar.tabHoverBackground": "#d3d3d3",
69
+ "sidebar.tabHoverForeground": "#000000",
70
+ "sidebar.tabActiveBackground": "#326ed6",
71
+ "sidebar.tabActiveForeground": "#ffffff",
72
+ "sidebar.tabActiveBorder": "",
73
+
74
+ "statusbar.background": "#FAFAFA",
75
+ "statusbar.foreground": "#000000",
76
+ "statusbar.buttonBackgroundHover": "#e9e9e9",
77
+ "statusbar.buttonForegroundHover": "#000000",
78
+
79
+ "editor.background": "#FAFAFA",
80
+ "editor.foreground": "#212121",
81
+ "editor.tabContainerBackground": "#2D2D2D",
82
+ "editor.tabBackground": "#F0F0F0",
83
+ "editor.tabForeground": "#000000",
84
+ "editor.tabBorderColor": "#DDDDDD",
85
+ "editor.tabActiveBorderColor": "#34b0f8",
86
+ "editor.tabActiveBackground": "#FAFAFA",
87
+ "editor.tabActiveForeground": "#212121",
88
+ "editor.tabHoverBackground": "#e9e9e9",
89
+ "editor.tabHoverForeground": "#212121",
90
+ "editor.tabSaveStateColor": "#000000",
91
+
92
+ "editor.gutterForeground": "#6E6E6E",
93
+ "editor.gutterActiveForeground": "#000000",
94
+ "editor.gutterActiveBackground": "#7e7e7e2b",
95
+ "editor.activeLineBackground": "#7e7e7e2b",
96
+ "editor.activeLineBorder": "",
97
+
98
+ "filetree.treeNodeBackground": "",
99
+ "filetree.treeNodeForeground": "#3D3D3D",
100
+ "filetree.treeNodeHoverBackground": "#d6d6d6",
101
+ "filetree.treeNodeHoverForeground": "#000000",
102
+ "filetree.treeNodeSelectedBackground": "#C1C1C1",
103
+ "filetree.treeNodeSelectedForeground": "#000000",
104
+
105
+ "modal.background": "#fdfdfd",
106
+ "modal.foreground": "#000000",
107
+ "modal.shadow": "#acacac50",
108
+ "modal.buttonBackground": "#2276b2",
109
+ "modal.buttonForeground": "#f9f9f9",
110
+ "modal.buttonHoverBackground": "#1c88d4",
111
+ "modal.buttonHoverForeground": "#f9f9f9"
112
}
113
}
src/config/themehandler.ts
+5
-15
@@ -26,22 +26,12 @@ export async function loadTheme(name: string) {
26
info("Theme loaded sucessfully.", {file: "themehandler.ts", line: 35});
27
}
28
function processStyles(json) {
29
- const theme = Object.entries(json.theme);
29
+ const theme: any = Object.entries(json.theme);
30
for (const entries of theme) {
31
- const category = entries[0];
32
- for (const property of Object.entries(entries[1])) {
33
- const name = property[0];
34
- let value = property[1];
35
-
36
- const cssValue = `${category}-${name}`;
37
-
38
- for (const style of stylesheet.style) {
39
- if (style === `--${cssValue}`) {
40
- value = value === "" ? "transparent" : value;
41
- stylesheet.style.setProperty(`--${cssValue}`, value);
42
- }
43
- }
44
- }
31
+ const [category, component] = entries[0].split(".");
32
+ const property = `--${category}-${component}`;
33
+ const value = entries[1] === "transparent" || "" ? "transparent" : entries[1];
34
+ stylesheet.style.setProperty(property, value);
35
}
36
}
37
export function getThemeProperty(styleName: string) {
src/theme.scss
+54
-102
@@ -2,96 +2,6 @@ $header-height: 2rem;
2
$statusbar-height: 1.5rem;
3
$tab-container-height: 2rem;
4
5
-:root {
6
- --window-foreground: "";
7
- --window-background: "";
8
- --window-borderColor: "";
9
- --window-accent: "";
10
-
11
- --window-dropdownBackground: "";
12
- --window-dropdownButtonBackground: "";
13
- --window-dropdownButtonHoverForeground: "";
14
- --window-dropdownItemHoverBackground: "";
15
- --window-dropdownItemHoverForeground: "";
16
- --window-inputBackground: "";
17
- --window-inputForeground: "";
18
- --window-inputBorder: "";
19
- --window-inputFocusBorder: "";
20
- --window-inputLabelForeground: "";
21
- --window-scrollbar-backgroundColor: #eeffff17;
22
- --window-selectBackground: "";
23
- --window-selectForeground: "";
24
- --window-selectButtonBackground: "";
25
- --window-selectButtonForeground: "";
26
- --window-selectItemHoverBackground: "";
27
- --window-selectItemHoverForeground: "";
28
- --window-buttonBackground: "";
29
- --window-buttonForeground: "";
30
- --window-buttonHoverBackground: "";
31
- --window-buttonHoverForeground: "";
32
- --window-boxShadow: "";
33
- --window-menuShortcutForeground: "";
34
- --window-disabledTextForeground: "";
35
- --window-invalidTextForeground: "";
36
- --window-readonlyTextForeground: "";
37
- --window-linkForeground: "";
38
- --window-linkHoverForeground: "";
39
- --window-descriptionForeground: "";
40
-
41
- --header-background: "";
42
- --header-foreground: "";
43
- --header-buttonHoverBackground: "";
44
- --header-borderColor: "";
45
-
46
- --sidebar-background: transparent;
47
- --sidebar-foreground: "";
48
- --sidebar-tabHoverBackground: "";
49
- --sidebar-tabHoverForeground: "";
50
- --sidebar-tabActiveBackground: transparent;
51
- --sidebar-tabActiveForeground: "";
52
- --sidebar-tabActiveBorder: red;
53
-
54
- --editor-tabContainerBackground: "";
55
-
56
- --editor-tabBackground: "";
57
- --editor-tabForeground: "";
58
- --editor-tabBorderColor: "";
59
- --editor-tabActiveBorderColor: "";
60
- --editor-tabActiveBackground: "";
61
- --editor-tabActiveForeground: "";
62
- --editor-tabHoverBackground: "";
63
- --editor-tabHoverForeground: "";
64
- --editor-tabSaveStateColor: "";
65
-
66
- --editor-background: "";
67
- --editor-foreground: "";
68
- --editor-gutter-foreground: "";
69
- --editor-gutterActiveForeground: "";
70
- --editor-gutterActiveBackground: "";
71
- --editor-activeLineBackground: "";
72
-
73
-
74
- --filetree-treeNodeBackground: transparent;
75
- --filetree-treeNodeForeground: "";
76
- --filetree-treeNodeHoverBackground: "";
77
- --filetree-treeNodeHoverForeground: "";
78
- --filetree-treeNodeSelectedBackground: transparent;
79
- --filetree-treeNodeSelectedForeground: "";
80
-
81
- --modal-background: "";
82
- --modal-foreground: "";
83
- --modal-shadow: "";
84
- --modal-buttonBackground: "";
85
- --modal-buttonForeground: "";
86
- --modal-buttonHoverBackground: "";
87
- --modal-buttonHoverForeground: ""
88
-
89
- --statusbar-background: transparent;
90
- --statusbar-foreground: "";
91
- --statusbar-buttonBackgroundHover: "";
92
- --statusbar-buttonForegroundHover: "";
93
-}
94
-
5
html {
6
background-color: var(--window-background);
7
color: var(--window-foreground);
@@ -119,7 +29,7 @@ html {
29
.window-button:not(.close):hover {
30
background-color: var(--header-buttonHoverBackground);
31
}
122
-.dropdown-button {
32
+.menu-button {
33
&:hover {
34
background-color: var(--header-buttonHoverBackground);
35
}
@@ -127,13 +37,13 @@ html {
37
background-color: var(--header-buttonHoverBackground);
38
}
39
}
130
-.dropdown-list, .context-menu {
131
- background-color: var(--window-dropdownBackground);
40
+.menu-list, .context-menu {
41
+ background-color: var(--window-menuBackground);
42
}
133
-.dropdown-item, .context-menu-option {
43
+.menu-item, .context-menu-option {
44
color: var(--window-foreground);
45
&:hover {
136
- background-color: var(--window-dropdownItemHoverBackground);
46
+ background-color: var(--window-menuItemHoverBackground);
47
}
48
}
49
.select {
@@ -150,7 +60,7 @@ html {
60
}
61
}
62
}
153
-.context-menu, .dropdown-list {
63
+.context-menu, .menu-list {
64
box-shadow: 0 2px 6px var(--window-boxShadow);
65
}
66
.option-shortcut, .shortcut {
@@ -189,6 +99,40 @@ input {
99
border-bottom: 1px solid var(--window-inputFocusBorder) !important;
100
}
101
}
102
+button {
103
+ &.primary {
104
+ background-color: var(--window-buttonBackground);
105
+ color: var(--window-buttonForeground);
106
+ &:hover {
107
+ background-color: var(--window-buttonHoverBackground);
108
+ color: var(--window-buttonHoverForeground);
109
+ }
110
+ }
111
+ &.secondary {
112
+ background-color: var(--window-buttonSecondaryBackground);
113
+ color: var(--window-buttonSecondaryForeground);
114
+ &:hover {
115
+ background-color: var(--window-buttonSecondaryHoverBackground);
116
+ color: var(--window-buttonSecondaryHoverForeground);
117
+ }
118
+ }
119
+ &.accent {
120
+ background-color: var(--window-buttonAccentBackground);
121
+ color: var(--window-buttonAccentForeground);
122
+ &:hover {
123
+ background-color: var(--window-buttonAccentHoverBackground);
124
+ color: var(--window-buttonHoverAccentForeground);
125
+ }
126
+ }
127
+ &.danger {
128
+ background-color: var(--window-buttonDangerBackground);
129
+ color: var(--window-buttonDangerForeground);
130
+ &:hover {
131
+ background-color: var(--window-buttonDangerHoverBackground);
132
+ color: var(--window-buttonDangerHoverForeground);
133
+ }
134
+ }
135
+}
136
button:focus {
137
outline: 1px solid;
138
outline-offset: 3px;
@@ -314,7 +258,7 @@ button:focus {
258
}
259
.cm-gutters {
260
background-color: var(--editor-background) !important;
317
- color: var(--editor-gutter-foreground) !important;
261
+ color: var(--editor-gutter-foreground);
262
border: none !important;
263
}
264
.cm-activeLineGutter {
@@ -346,15 +290,23 @@ button:focus {
290
background-color: var(--modal-background);
291
color: var(--modal-foreground);
292
button {
349
- background-color: var(--modal-buttonBackground);
350
- color: var(--modal-buttonForeground);
293
+ &:first-child {
294
+ background-color: var(--modal-buttonBackground) !important;
295
+ color: var(--modal-buttonForeground) !important;
296
+ &:hover {
297
+ background-color: var(--modal-buttonHoverBackground) !important;
298
+ color: var(--modal-buttonHoverForeground) !important;
299
+ }
300
+ }
301
+ background-color: var(--window-buttonSecondaryBackground);
302
+ color: var(--window-buttonSecondaryForeground);
303
&:hover {
352
- background-color: var(--modal-buttonHoverBackground);
353
- color: var(--modal-buttonHoverForeground);
304
+ background-color: var(--window-buttonSecondaryHoverBackground);
305
+ color: var(--window-buttonSecondaryHoverForeground);
306
}
307
&:focus {
308
outline-color: var(--window-inputFocusBorder);
309
}
310
}
311
}
360
-}
\ No newline at end of file
312
+}