style: moved component styles to theme file
mellbacon committed
Jun 24, 2023 at 13:20 UTC
3dd629e430627890862327be6c4ba1655eee0f2b
5 files changed
+28
-13
src/config/themes/dark-theme.json
+7
-1
@@ -10,8 +10,13 @@
10
"dropdownButtonBackground": "#2D2D2D",
11
"dropdownButtonForeground": "#ffffff",
12
"dropdownButtonHoverForeground": "#ffffff",
13
- "dropdownItemHoverBackground": "#171717",
13
+ "dropdownItemHoverBackground": "#414040",
14
"dropdownItemHoverForeground": "#ffffff",
15
+ "inputBackground": "#333",
16
+ "inputForeground": "#ffffff",
17
+ "inputBorder": "#6f6f6f",
18
+ "inputFocusBorder": "",
19
+ "inputLabelForeground": "#c6c6c6",
20
"scrollbarBackground": "#4c4c4c38"
21
},
22
"header": {
@@ -44,6 +49,7 @@
49
"tabActiveForeground": "#ffffff",
50
"tabHoverBackground": "2b2b2b",
51
"tabHoverForeground": "#ffffff",
52
+ "tabSaveStateColor": "#ffffff",
53
"gutterForeground": "#898989",
54
"gutterActiveForeground": "#ffffff",
55
"gutterActiveBackground": "#212121",
src/lib/Tab/Tab.svelte
-1
@@ -63,7 +63,6 @@
63
display: block;
64
width: 6px;
65
height: 6px;
66
- background-color: white;
66
border-radius: 50%;
67
left: -11px;
68
top: 0.5px;
src/lib/utility/ContextMenu.svelte
-5
@@ -85,7 +85,6 @@
85
.context-menu {
86
min-width: 10rem;
87
max-width: 18rem;
88
- background-color: #2D2D2D;
88
padding: 0.25rem;
89
z-index: 9999;
90
position: absolute;
@@ -101,10 +100,6 @@
100
width: 100%;
101
font-size: 0.875rem;
102
cursor: pointer;
104
- color: #ffffff;
105
- &:hover {
106
- background-color: #414040;
107
- }
103
}
104
.option-name, .option-shortcut {
105
padding: 0 10px;
src/lib/utility/Input.svelte
-4
@@ -15,14 +15,10 @@
15
<style lang="scss">
16
label {
17
font-size: 0.9rem;
18
- color: #c6c6c6;
18
}
19
input {
20
border: none;
22
- background-color: #333;
23
- border-bottom: 1px solid #6f6f6f;
21
padding: 0.6em 0.4em 0.6em 0.8em;
25
- color: white;
22
width: 100%;
23
}
24
</style>
\ No newline at end of file
src/theme.scss
+21
-2
@@ -12,6 +12,10 @@ $tab-container-height: 2rem;
12
--window-dropdownButtonHoverForeground: #ffffff;
13
--window-dropdownItemHoverBackground: #171717;
14
--window-dropdownItemHoverForeground: #ffffff;
15
+ --window-inputBackground: "";
16
+ --window-inputForeground: "";
17
+ --window-inputBorder: "";
18
+ --window-inputLabelForeground: "";
19
--window-scrollbar-backgroundColor: #eeffff17;
20
21
--header-background: #2D2D2D;
@@ -36,6 +40,7 @@ $tab-container-height: 2rem;
40
--editor-tabActiveForeground: #ffffff;
41
--editor-tabHoverBackground: #2b2b2b;
42
--editor-tabHoverForeground: #ffffff;
43
+ --editor-tabSaveStateColor: #ffffff;
44
45
--editor-background: #171717;
46
--editor-foreground: #e7e7e7;
@@ -82,14 +87,25 @@ html {
87
background-color: var(--header-buttonHoverBackground);
88
}
89
}
85
-.dropdown-list {
90
+.dropdown-list, .context-menu {
91
background-color: var(--window-dropdownBackground);
92
}
88
-.dropdown-item {
93
+.dropdown-item, .context-menu-option {
94
+ color: var(--window-foreground);
95
&:hover {
96
background-color: var(--window-dropdownItemHoverBackground);
97
}
98
}
99
+
100
+label {
101
+ color: var(--window-inputLabelForeground);
102
+}
103
+input {
104
+ border-bottom: 1px solid var(--window-inputBorder) !important;
105
+ background-color: var(--window-inputBackground);
106
+ color: var(--window-inputForeground);
107
+}
108
+
109
.divider {
110
background-color: var(--window-borderColor);
111
}
@@ -155,6 +171,9 @@ html {
171
color: var(--editor-tabActiveForeground);
172
}
173
}
174
+ .tab-content.save-state {
175
+ background-color: var(--editor-tabSaveStateColor);
176
+ }
177
.tab-toolbar {
178
box-shadow: inset 1px 0px 0 0 var(--window-borderColor);
179
}