Skip to content

Commit b2c0905

Browse files
timothydoddtimothydodd
committed
style: Update component styles with gradient backgrounds and improved border colors
1 parent 4c449ee commit b2c0905

7 files changed

Lines changed: 90 additions & 60 deletions

File tree

‎src/app/converters/convert-view/convert-view.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,8 +193,10 @@
193193
justify-content: space-between;
194194
align-items: center;
195195
padding: 1rem 1.5rem;
196-
background: rgba(255, 255, 255, 0.02);
197-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
196+
background: linear-gradient(135deg,
197+
rgba(139, 233, 253, 0.08) 0%,
198+
rgba(80, 250, 123, 0.05) 100%);
199+
border-bottom: 1px solid rgba(139, 233, 253, 0.2);
198200
}
199201

200202
.panel-title {

‎src/app/encoders/encoder-view/encoder-view.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,10 @@
157157
justify-content: space-between;
158158
align-items: center;
159159
padding: 1rem 1.5rem;
160-
background: rgba(255, 255, 255, 0.02);
161-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
160+
background: linear-gradient(135deg,
161+
rgba(255, 121, 198, 0.08) 0%,
162+
rgba(189, 147, 249, 0.05) 100%);
163+
border-bottom: 1px solid rgba(255, 121, 198, 0.2);
162164
}
163165

164166
.panel-title {

‎src/app/formatters/format-view/format-view.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,10 @@
171171
justify-content: space-between;
172172
align-items: center;
173173
padding: 1rem 1.5rem;
174-
background: rgba(255, 255, 255, 0.02);
175-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
174+
background: linear-gradient(135deg,
175+
rgba(189, 147, 249, 0.08) 0%,
176+
rgba(255, 121, 198, 0.05) 100%);
177+
border-bottom: 1px solid rgba(189, 147, 249, 0.2);
176178
}
177179

178180
.panel-title {

‎src/app/generators/g-guid/g-guid.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,10 @@
119119
justify-content: space-between;
120120
align-items: center;
121121
padding: 1rem 1.5rem;
122-
background: rgba(255, 255, 255, 0.02);
123-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
122+
background: linear-gradient(135deg,
123+
rgba(80, 250, 123, 0.08) 0%,
124+
rgba(139, 233, 253, 0.05) 100%);
125+
border-bottom: 1px solid rgba(80, 250, 123, 0.2);
124126
}
125127

126128
.panel-title {

‎src/app/generators/g-lorem/g-lorem.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,10 @@
119119
justify-content: space-between;
120120
align-items: center;
121121
padding: 1rem 1.5rem;
122-
background: rgba(255, 255, 255, 0.02);
123-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
122+
background: linear-gradient(135deg,
123+
rgba(139, 233, 253, 0.08) 0%,
124+
rgba(189, 147, 249, 0.05) 100%);
125+
border-bottom: 1px solid rgba(139, 233, 253, 0.2);
124126
}
125127

126128
.panel-title {

‎src/app/monaco/monaco-global-config.ts‎

Lines changed: 66 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@ export class MonacoEditorConfig implements NgxMonacoEditorConfig {
2323
inherit: true,
2424
rules: [
2525
{
26-
background: '282a36',
26+
background: '1a1a2e',
2727
token: '',
2828
},
2929
{
30-
foreground: '6272a4',
30+
foreground: '8be9fd',
31+
fontStyle: 'italic',
3132
token: 'comment',
3233
},
3334
{
34-
foreground: 'f1fa8c',
35+
foreground: '50fa7b',
3536
token: 'string',
3637
},
3738
{
@@ -51,59 +52,62 @@ export class MonacoEditorConfig implements NgxMonacoEditorConfig {
5152
token: 'constant.other',
5253
},
5354
{
54-
foreground: 'ffb86c',
55+
foreground: '8be9fd',
5556
token: 'variable.other.readwrite.instance',
5657
},
5758
{
58-
foreground: 'ff79c6',
59+
foreground: '50fa7b',
5960
token: 'constant.character.escaped',
6061
},
6162
{
62-
foreground: 'ff79c6',
63+
foreground: '50fa7b',
6364
token: 'constant.character.escape',
6465
},
6566
{
66-
foreground: 'ff79c6',
67+
foreground: '50fa7b',
6768
token: 'string source',
6869
},
6970
{
70-
foreground: 'ff79c6',
71+
foreground: '50fa7b',
7172
token: 'string source.ruby',
7273
},
7374
{
74-
foreground: 'ff79c6',
75+
foreground: '8be9fd',
76+
fontStyle: 'bold',
7577
token: 'keyword',
7678
},
7779
{
78-
foreground: 'ff79c6',
80+
foreground: '8be9fd',
81+
fontStyle: 'bold',
7982
token: 'storage',
8083
},
8184
{
82-
foreground: '8be9fd',
85+
foreground: '50fa7b',
8386
fontStyle: 'italic',
8487
token: 'storage.type',
8588
},
8689
{
8790
foreground: '50fa7b',
88-
fontStyle: 'underline',
91+
fontStyle: 'bold',
8992
token: 'entity.name.class',
9093
},
9194
{
9295
foreground: '50fa7b',
93-
fontStyle: 'italic underline',
96+
fontStyle: 'italic',
9497
token: 'entity.other.inherited-class',
9598
},
9699
{
97-
foreground: '50fa7b',
100+
foreground: '8be9fd',
101+
fontStyle: 'bold',
98102
token: 'entity.name.function',
99103
},
100104
{
101-
foreground: 'ffb86c',
105+
foreground: 'bd93f9',
102106
fontStyle: 'italic',
103107
token: 'variable.parameter',
104108
},
105109
{
106-
foreground: 'ff79c6',
110+
foreground: '8be9fd',
107111
token: 'entity.name.tag',
108112
},
109113
{
@@ -115,115 +119,129 @@ export class MonacoEditorConfig implements NgxMonacoEditorConfig {
115119
token: 'support.function',
116120
},
117121
{
118-
foreground: '6be5fd',
122+
foreground: '50fa7b',
119123
token: 'support.constant',
120124
},
121125
{
122-
foreground: '66d9ef',
123-
fontStyle: ' italic',
126+
foreground: 'bd93f9',
127+
fontStyle: 'italic',
124128
token: 'support.type',
125129
},
126130
{
127-
foreground: '66d9ef',
128-
fontStyle: ' italic',
131+
foreground: 'bd93f9',
132+
fontStyle: 'italic',
129133
token: 'support.class',
130134
},
131135
{
132-
foreground: 'f8f8f0',
133-
background: 'ff79c6',
136+
foreground: 'ffffff',
137+
background: 'ff5555',
134138
token: 'invalid',
135139
},
136140
{
137-
foreground: 'f8f8f0',
138-
background: 'bd93f9',
141+
foreground: 'ffffff',
142+
background: 'ffb86c',
139143
token: 'invalid.deprecated',
140144
},
141145
{
142-
foreground: 'cfcfc2',
146+
foreground: 'e2e8f0',
143147
token: 'meta.structure.dictionary.json string.quoted.double.json',
144148
},
145149
{
146-
foreground: '6272a4',
150+
foreground: '8be9fd',
151+
fontStyle: 'italic',
147152
token: 'meta.diff',
148153
},
149154
{
150-
foreground: '6272a4',
155+
foreground: '8be9fd',
156+
fontStyle: 'italic',
151157
token: 'meta.diff.header',
152158
},
153159
{
154-
foreground: 'ff79c6',
160+
foreground: 'ff5555',
155161
token: 'markup.deleted',
156162
},
157163
{
158164
foreground: '50fa7b',
159165
token: 'markup.inserted',
160166
},
161167
{
162-
foreground: 'e6db74',
168+
foreground: 'ffb86c',
163169
token: 'markup.changed',
164170
},
165171
{
166172
foreground: 'bd93f9',
167173
token: 'constant.numeric.line-number.find-in-files - match',
168174
},
169175
{
170-
foreground: 'e6db74',
176+
foreground: 'ffb86c',
171177
token: 'entity.name.filename',
172178
},
173179
{
174-
foreground: 'f83333',
180+
foreground: 'ff5555',
181+
fontStyle: 'bold',
175182
token: 'message.error',
176183
},
177184
{
178-
foreground: 'eeeeee',
185+
foreground: 'f1f5f9',
179186
token: 'punctuation.definition.string.begin.json - meta.structure.dictionary.value.json',
180187
},
181188
{
182-
foreground: 'eeeeee',
189+
foreground: 'f1f5f9',
183190
token: 'punctuation.definition.string.end.json - meta.structure.dictionary.value.json',
184191
},
185192
{
186193
foreground: '8be9fd',
187194
token: 'meta.structure.dictionary.json string.quoted.double.json',
188195
},
189196
{
190-
foreground: 'f1fa8c',
197+
foreground: '50fa7b',
191198
token: 'meta.structure.dictionary.value.json string.quoted.double.json',
192199
},
193200
{
194201
foreground: '50fa7b',
195202
token: 'meta meta meta meta meta meta meta.structure.dictionary.value string',
196203
},
197204
{
198-
foreground: 'ffb86c',
205+
foreground: '8be9fd',
199206
token: 'meta meta meta meta meta meta.structure.dictionary.value string',
200207
},
201208
{
202-
foreground: 'ff79c6',
209+
foreground: 'bd93f9',
203210
token: 'meta meta meta meta meta.structure.dictionary.value string',
204211
},
205212
{
206-
foreground: 'bd93f9',
213+
foreground: '50fa7b',
207214
token: 'meta meta meta meta.structure.dictionary.value string',
208215
},
209216
{
210-
foreground: '50fa7b',
217+
foreground: '8be9fd',
211218
token: 'meta meta meta.structure.dictionary.value string',
212219
},
213220
{
214-
foreground: 'ffb86c',
221+
foreground: 'bd93f9',
215222
token: 'meta meta.structure.dictionary.value string',
216223
},
217224
],
218225
colors: {
219-
'editor.foreground': '#f8f8f2',
220-
'editor.background': '#282a36',
221-
'editor.selectionBackground': '#44475a',
222-
'editor.lineHighlightBackground': '#44475a',
223-
'editorCursor.foreground': '#f8f8f0',
224-
'editorWhitespace.foreground': '#3B3A32',
225-
'editorIndentGuide.activeBackground': '#9D550FB0',
226-
'editor.selectionHighlightBorder': '#222218',
226+
'editor.foreground': '#f1f5f9',
227+
'editor.background': '#1a1a2e',
228+
'editor.selectionBackground': '#3d4852',
229+
'editor.lineHighlightBackground': '#252b3a',
230+
'editorCursor.foreground': '#50fa7b',
231+
'editorWhitespace.foreground': '#475569',
232+
'editorIndentGuide.background': '#374151',
233+
'editorIndentGuide.activeBackground': '#50fa7b80',
234+
'editor.selectionHighlightBorder': '#8be9fd40',
235+
'editorLineNumber.foreground': '#64748b',
236+
'editorLineNumber.activeForeground': '#8be9fd',
237+
'scrollbarSlider.background': '#50fa7b30',
238+
'scrollbarSlider.hoverBackground': '#50fa7b50',
239+
'scrollbarSlider.activeBackground': '#50fa7b70',
240+
'editorGutter.background': '#16213e',
241+
'editorError.foreground': '#ff5555',
242+
'editorWarning.foreground': '#ffb86c',
243+
'editorInfo.foreground': '#8be9fd',
244+
'editorHint.foreground': '#50fa7b',
227245
},
228246
});
229247
}

‎src/app/time/time-zones/time-zones.component.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,10 @@
174174
justify-content: space-between;
175175
align-items: center;
176176
padding: 1rem 1.5rem;
177-
background: rgba(255, 255, 255, 0.02);
178-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
177+
background: linear-gradient(135deg,
178+
rgba(80, 250, 123, 0.08) 0%,
179+
rgba(139, 233, 253, 0.05) 100%);
180+
border-bottom: 1px solid rgba(80, 250, 123, 0.2);
179181
}
180182

181183
.panel-title {

0 commit comments

Comments
 (0)