ASCII text
1
@use "../../../theme";
2
@use "../../../theme-color";
3
@use "../../../color-palette";
4
@use "../common";
5
/**
7
* Tilix
8
*/
9
overlay > revealer {
11
&.left > scrolledwindow.frame,
12
&.right > scrolledwindow.frame {
13
border-style: none;
14
box-shadow: theme.$shadow-z16;
15
}
16
&.left > scrolledwindow.frame {
18
margin-right: 32px;
19
}
20
&.right > scrolledwindow.frame {
22
margin-left: 32px;
23
}
24
}
25
.terminix-session-sidebar, // for backward compatibility
27
.tilix-session-sidebar {
28
background-image: image(theme-color.$surface-z8);
29
}
30
.terminal-titlebar button {
32
border-radius: 0;
33
}
34
button.image-button.session-new-button {
36
min-width: theme.$medium-size - 4px;
37
}
38
// Remove extra padding
40
notebook.tilix-background tab > box > stack {
41
margin: -6px;
42
}
43
button.flat.tilix-small-button {
45
// NOTE: padding is hard-coded with:
46
// padding: 2px 4px;
47
min-height: theme.$small-size - 2px * 2;
48
min-width: theme.$small-size - 4px * 2;
49
}
50
/**
52
* Terminator
53
*/
54
.terminator-terminal-window {
56
paned > separator {
57
background-color: theme-color.$surface-z0;
58
}
59
// this should be fixed by the upstream
61
notebook.frame {
62
border-style: none;
63
background-color: transparent;
64
}
65
}
66
/**
68
* Ubitquity
69
*/
70
#live_installer .menubar progressbar trough {
72
border-radius: 4px; // Adjust to hard-coded progress border-radius
73
background-color: theme-color.disabled-stroke(theme-color.$on-titlebar);
74
}
75
/**
77
* Eclipse
78
*/
79
window.background > box.vertical > scrolledwindow > widget toolbar {
81
padding: 2px;
82
separator,
84
button {
85
margin: 2px;
86
}
87
button {
89
border-radius: theme.$corner-radius;
90
}
91
}
92
/**
94
* FileZilla
95
*/
96
window.background > box.vertical > widget > widget > widget > widget > widget > widget > widget > scrolledwindow > widget {
98
> entry {
99
all: unset;
100
padding: 5px;
101
box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
102
background-color: theme-color.$surface-z1;
103
}
104
> widget > entry {
106
all: unset;
107
padding: 0 3px 1px;
108
box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
109
background-color: theme-color.$surface-z1;
110
}
111
}
112
/**
114
* Chromium
115
*/
116
window.background.chromium {
118
background-color: theme-color.$surface-z8;
119
// FIXME: There is no way to change the color of the toolbar buttons
121
toolbar button {
122
// color: hint($on-surface);
123
}
124
// toolbar's border-bottom refers to button's border
126
// FIXME: Chrome's button border ignores theme's alpha value :(
127
entry,
128
> button {
129
border: 1px solid theme-color.stroke(theme-color.$on-surface);
130
}
131
> button {
133
color: theme-color.$primary;
134
&:disabled {
136
color: theme-color.disabled-hint(theme-color.$on-surface);
137
}
138
}
139
menubar,
141
headerbar {
142
color: theme-color.hint(theme-color.$on-titlebar);
143
}
144
// Workaround for non-animatable buttons in headerbar
146
headerbar button:active {
147
background-color: theme-color.pressed-overlay(theme-color.$on-titlebar);
148
}
149
// For text field
151
textview.view {
152
background-color: transparent;
153
}
154
// For prominent button, starred icon, etc.
156
treeview.view.cell:selected:focus {
157
background-color: theme-color.$primary;
158
color: theme-color.$on-primary;
159
}
160
// For table header
162
treeview.view button {
163
border: 1px solid theme-color.stroke(theme-color.$on-surface);
164
background-color: theme-color.$surface-z1; // FIXME: This should not be necessary
165
// color: hint($on-surface);
166
}
167
}
168
tooltip.background.chromium {
170
background-color: rgba(theme-color.$tooltip, 1);
171
}
172
/**
174
* Firefox
175
*/
176
#MozillaGtkWidget {
178
> widget {
179
// For popover, entry in toolbar, etc.
180
text {
181
background-color: theme-color.$surface-z8;
182
}
183
// For selection, active tab indicator, etc.
185
text:selected {
186
// Use traditional selection style as workaround
187
background-color: theme-color.$primary;
188
color: theme-color.$on-primary;
189
}
190
// For separators in bookmark toolbar
192
> separator {
193
color: theme-color.divider(theme-color.$on-surface);
194
}
195
// avoid black border
197
> scrollbar {
198
// background-clip: border-box;
199
}
200
// Emphasize toolbar's border-bottom
202
> frame > border {
203
// FIXME: On Wayland, translucent colors don't work well here.
204
// See: https://github.com/nana-4/materia-theme/issues/467
205
border-color: theme-color.opacify(theme-color.stroke(theme-color.$on-surface), theme-color.$surface-z0);
206
}
207
> entry,
209
> button > button {
210
border: 1px solid theme-color.stroke(theme-color.$on-surface);
211
border-radius: theme.$corner-radius;
212
box-shadow: none;
213
&:disabled {
215
border-color: theme-color.disabled-stroke(theme-color.$on-surface);
216
}
217
}
218
> entry {
220
min-height: 32px - 2px;
221
background-color: theme-color.$surface-z1;
222
&:focus {
224
border-color: theme-color.$primary;
225
box-shadow: inset 0 0 0 1px theme-color.$primary;
226
}
227
&:disabled {
229
background-color: theme-color.$surface-z1;
230
}
231
}
232
> button > button {
234
padding: 4px 8px;
235
&:active {
237
background-size: 1000% 1000%;
238
}
239
}
240
// use 16px assets for hard-coded sizing
242
> checkbutton > check {
243
@extend %small_check;
244
}
245
> radiobutton > radio {
247
@extend %small_radio;
248
}
249
> checkbutton > check,
251
> radiobutton > radio {
252
margin: 0;
253
padding: 0;
254
}
255
// make check/radio visible regardless of whether the background is bright or dark
257
> checkbutton > check:not(:checked):not(:indeterminate),
258
> radiobutton > radio:not(:checked):not(:indeterminate) {
259
color: color-palette.$grey-600;
260
&:disabled {
262
color: rgba(color-palette.$grey-600, .5);
263
}
264
}
265
}
266
// remove ugly border around the menus
268
menu {
269
// FIXME: The ugly border is still needed, since the menu doesn't
270
// draw its drop shadow in some environments. See:
271
// https://github.com/nana-4/materia-theme/issues/462
272
// border: none;
274
}
275
// Workaround: Firefox doesn't properly read color from
277
// menuitem:disabled, but from menuitem label:disabled.
278
menuitem label:disabled {
279
color: theme-color.disabled(theme-color.$on-surface);
280
}
281
}
282
// for backward compatibility
284
#MozillaGtkWidget {
285
> widget {
286
> menubar {
287
color: theme-color.hint(theme-color.$on-titlebar);
288
&:hover {
290
color: theme-color.$on-titlebar;
291
}
292
&:disabled {
294
color: theme-color.disabled-hint(theme-color.$on-titlebar);
295
}
296
}
297
> frame {
299
color: theme-color.stroke(theme-color.$on-surface);
300
}
301
}
302
menu > separator {
304
color: theme-color.divider(theme-color.$on-surface);
305
}
306
}
307
/**
309
* Inkscape
310
*/
311
#ToolboxCommon {
313
> #AuxToolbox {
314
#StyleSwatch {
315
font-size: smaller;
316
}
317
#Kludge {
319
padding: 0;
320
}
321
spinbutton,
323
entry {
324
min-height: 32px;
325
}
326
button:not(.up):not(.down) {
328
min-height: 24px;
329
min-width: 16px;
330
padding: 4px 8px;
331
border-radius: theme.$corner-radius;
332
}
333
spinbutton button {
335
border-width: 4px;
336
}
337
}
338
> toolbar.vertical {
340
margin-top: -4px;
341
button {
343
min-height: 24px;
344
min-width: 24px;
345
padding: 4px;
346
border-radius: theme.$corner-radius;
347
}
348
}
349
}
350
#CanvasTable {
352
button {
353
min-height: 16px;
354
min-width: 16px;
355
padding: 0;
356
border-radius: 0;
357
@extend %button-flat-activatable;
358
}
359
#HorizontalScrollbar {
361
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
362
}
363
#VerticalScrollbar {
365
&:dir(ltr) {
366
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
367
}
368
&:dir(rtl) {
370
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
371
}
372
}
373
}
374
#Canvas_and_Dock {
376
frame > border {
377
border: none;
378
background-color: transparent;
379
}
380
// each canvases' titlebar
382
widget > widget {
383
> button.flat {
384
min-height: 16px;
385
min-width: 16px;
386
padding: 4px;
387
}
388
> box.horizontal image {
390
padding: 4px;
391
}
392
}
393
// vertical dock buttons
395
box.horizontal > box.vertical > button.flat {
396
min-height: 16px;
397
min-width: 24px;
398
padding: 8px 4px;
399
}
400
}
401
/**
403
* Synapse
404
*/
405
box.vertical > widget > widget:selected {
407
background-color: theme-color.$selected-overlay;
408
}
409