ASCII text
1
@use "sass:color";
2
@use "../../../theme";
3
@use "../../../theme-color";
4
@use "../../../shadow";
5
@use "../../../color-palette";
6
@use "../common";
7
/**
9
* Tilix
10
*/
11
overlay > revealer {
13
&.left > scrolledwindow.frame,
14
&.right > scrolledwindow.frame {
15
border-style: none;
16
box-shadow: shadow.$z16;
17
}
18
&.left > scrolledwindow.frame {
20
margin-right: 32px;
21
}
22
&.right > scrolledwindow.frame {
24
margin-left: 32px;
25
}
26
}
27
.terminix-session-sidebar, // for backward compatibility
29
.tilix-session-sidebar {
30
background-image: image(theme-color.$surface-z8);
31
}
32
.terminal-titlebar button {
34
border-radius: 0;
35
}
36
button.image-button.session-new-button {
38
min-width: theme.$medium-size - 4px;
39
}
40
// Remove extra padding
42
notebook.tilix-background tab > box > stack {
43
margin: -6px;
44
}
45
button.flat.tilix-small-button {
47
// NOTE: padding is hard-coded with:
48
// padding: 2px 4px;
49
min-height: theme.$small-size - 2px * 2;
50
min-width: theme.$small-size - 4px * 2;
51
}
52
/**
54
* Terminator
55
*/
56
.terminator-terminal-window {
58
paned > separator {
59
background-color: theme-color.$surface-z0;
60
}
61
// this should be fixed by the upstream
63
notebook.frame {
64
border-style: none;
65
background-color: transparent;
66
}
67
}
68
/**
70
* Ubitquity
71
*/
72
#live_installer .menubar progressbar trough {
74
border-radius: 4px; // Adjust to hard-coded progress border-radius
75
background-color: theme-color.disabled-stroke(theme-color.$on-titlebar);
76
}
77
/**
79
* Eclipse
80
*/
81
window.background > box.vertical > scrolledwindow > widget toolbar {
83
padding: 2px;
84
separator,
86
button {
87
margin: 2px;
88
}
89
button {
91
border-radius: theme.$corner-radius;
92
}
93
}
94
/**
96
* FileZilla
97
*/
98
window.background > box.vertical > widget > widget > widget > widget > widget > widget > widget > scrolledwindow > widget {
100
> entry {
101
all: unset;
102
padding: 5px;
103
box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
104
background-color: theme-color.$surface-z1;
105
}
106
> widget > entry {
108
all: unset;
109
padding: 0 3px 1px;
110
box-shadow: inset 0 0 0 1px theme-color.$selected-overlay;
111
background-color: theme-color.$surface-z1;
112
}
113
}
114
/**
116
* Chromium
117
*/
118
window.background.chromium {
120
background-color: theme-color.$surface-z8;
121
// FIXME: There is no way to change the color of the toolbar buttons
123
toolbar button {
124
// color: hint($on-surface);
125
}
126
// toolbar's border-bottom refers to button's border
128
// FIXME: Chrome's button border ignores theme's alpha value :(
129
entry,
130
> button {
131
border: 1px solid theme-color.stroke(theme-color.$on-surface);
132
}
133
> button {
135
color: theme-color.$primary;
136
// Source: https://github.com/heldplayer/materia-theme-custom/commit/93af85f1c775745e46f92673bc55edf39b179579
138
$this-border-color: theme-color.stroke(theme-color.$on-surface);
139
border-color: color.mix(rgba($this-border-color, 1), theme-color.$surface-z8, color.alpha($this-border-color) * 100%);
140
&:disabled {
142
color: theme-color.disabled-hint(theme-color.$on-surface);
143
}
144
}
145
menubar,
147
headerbar {
148
color: theme-color.hint(theme-color.$on-titlebar);
149
}
150
// Workaround for non-animatable buttons in headerbar
152
headerbar button:active {
153
background-color: theme-color.pressed-overlay(theme-color.$on-titlebar);
154
}
155
// For text field
157
textview.view {
158
background-color: transparent;
159
}
160
// For prominent button, starred icon, etc.
162
treeview.view.cell:selected:focus {
163
background-color: theme-color.$primary;
164
color: theme-color.$on-primary;
165
}
166
// For table header
168
treeview.view button {
169
border: 1px solid theme-color.stroke(theme-color.$on-surface);
170
background-color: theme-color.$surface-z1; // FIXME: This should not be necessary
171
// color: hint($on-surface);
172
}
173
}
174
tooltip.background.chromium {
176
background-color: rgba(theme-color.$tooltip, 1);
177
}
178
/**
180
* Firefox
181
*/
182
#MozillaGtkWidget {
184
> widget {
185
// For popover, entry in toolbar, etc.
186
text {
187
background-color: theme-color.$surface-z8;
188
}
189
// For selection, active tab indicator, etc.
191
text:selected {
192
// Use traditional selection style as workaround
193
background-color: theme-color.$primary;
194
color: theme-color.$on-primary;
195
}
196
// For separators in bookmark toolbar
198
> separator {
199
color: theme-color.divider(theme-color.$on-surface);
200
}
201
// avoid black border
203
> scrollbar {
204
// background-clip: border-box;
205
}
206
// Emphasize toolbar's border-bottom
208
> frame > border {
209
// FIXME: On Wayland, translucent colors don't work well here.
210
// See: https://github.com/nana-4/materia-theme/issues/467
211
border-color: theme-color.opacify(theme-color.stroke(theme-color.$on-surface), theme-color.$surface-z0);
212
}
213
> entry,
215
> button > button {
216
border: 1px solid theme-color.stroke(theme-color.$on-surface);
217
border-radius: theme.$corner-radius;
218
box-shadow: none;
219
&:disabled {
221
border-color: theme-color.disabled-stroke(theme-color.$on-surface);
222
}
223
}
224
> entry {
226
min-height: 32px - 2px;
227
background-color: theme-color.$surface-z1;
228
&:focus {
230
border-color: theme-color.$primary;
231
box-shadow: inset 0 0 0 1px theme-color.$primary;
232
}
233
&:disabled {
235
background-color: theme-color.$surface-z1;
236
}
237
}
238
> button > button {
240
padding: 4px 8px;
241
&:active {
243
background-size: 1000% 1000%;
244
}
245
}
246
// use 16px assets for hard-coded sizing
248
> checkbutton > check {
249
@extend %small_check;
250
}
251
> radiobutton > radio {
253
@extend %small_radio;
254
}
255
> checkbutton > check,
257
> radiobutton > radio {
258
margin: 0;
259
padding: 0;
260
}
261
// make check/radio visible regardless of whether the background is bright or dark
263
> checkbutton > check:not(:checked):not(:indeterminate),
264
> radiobutton > radio:not(:checked):not(:indeterminate) {
265
color: color-palette.$grey-600;
266
&:disabled {
268
color: rgba(color-palette.$grey-600, .5);
269
}
270
}
271
}
272
// remove ugly border around the menus
274
menu {
275
// FIXME: The ugly border is still needed, since the menu doesn't
276
// draw its drop shadow in some environments. See:
277
// https://github.com/nana-4/materia-theme/issues/462
278
// border: none;
280
}
281
// Workaround: Firefox doesn't properly read color from
283
// menuitem:disabled, but from menuitem label:disabled.
284
menuitem label:disabled {
285
color: theme-color.disabled(theme-color.$on-surface);
286
}
287
}
288
// for backward compatibility
290
#MozillaGtkWidget {
291
> widget {
292
> menubar {
293
color: theme-color.hint(theme-color.$on-titlebar);
294
&:hover {
296
color: theme-color.$on-titlebar;
297
}
298
&:disabled {
300
color: theme-color.disabled-hint(theme-color.$on-titlebar);
301
}
302
}
303
> frame {
305
color: theme-color.stroke(theme-color.$on-surface);
306
}
307
}
308
menu > separator {
310
color: theme-color.divider(theme-color.$on-surface);
311
}
312
}
313
/**
315
* Inkscape
316
*/
317
#ToolboxCommon {
319
> #AuxToolbox {
320
#StyleSwatch {
321
font-size: smaller;
322
}
323
#Kludge {
325
padding: 0;
326
}
327
spinbutton,
329
entry {
330
min-height: 32px;
331
}
332
button:not(.up):not(.down) {
334
min-height: 24px;
335
min-width: 16px;
336
padding: 4px 8px;
337
border-radius: theme.$corner-radius;
338
}
339
spinbutton button {
341
border-width: 4px;
342
}
343
}
344
> toolbar.vertical {
346
margin-top: -4px;
347
button {
349
min-height: 24px;
350
min-width: 24px;
351
padding: 4px;
352
border-radius: theme.$corner-radius;
353
}
354
}
355
}
356
#CanvasTable {
358
button {
359
min-height: 16px;
360
min-width: 16px;
361
padding: 0;
362
border-radius: 0;
363
@extend %button-flat-activatable;
364
}
365
#HorizontalScrollbar {
367
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
368
}
369
#VerticalScrollbar {
371
&:dir(ltr) {
372
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
373
}
374
&:dir(rtl) {
376
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
377
}
378
}
379
}
380
#Canvas_and_Dock {
382
frame > border {
383
border: none;
384
background-color: transparent;
385
}
386
// each canvases' titlebar
388
widget > widget {
389
> button.flat {
390
min-height: 16px;
391
min-width: 16px;
392
padding: 4px;
393
}
394
> box.horizontal image {
396
padding: 4px;
397
}
398
}
399
// vertical dock buttons
401
box.horizontal > box.vertical > button.flat {
402
min-height: 16px;
403
min-width: 24px;
404
padding: 8px 4px;
405
}
406
}
407
/**
409
* Synapse
410
*/
411
box.vertical > widget > widget:selected {
413
background-color: theme-color.$selected-overlay;
414
}
415