A fork of the Materia GTK theme.

Important information: Google announced that, from September 2026, Android devices will require ALL apps to be signed by Google, effectively leading to an iOS situation. Value your right to a computer that does what you want; do not tolerate this monopolistic practice! Contact me if you don't understand why it is bad. Click to learn more.

 _misc.scss

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