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