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.33 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
// FIXME: The ugly border is still needed, since the menu doesn't
275
// draw its drop shadow in some environments. See:
276
// https://github.com/nana-4/materia-theme/issues/462
277
278
// border: none;
279
}
280
281
// Workaround: Firefox doesn't properly read color from
282
// menuitem:disabled, but from menuitem label:disabled.
283
menuitem label:disabled {
284
color: disabled($on-surface);
285
}
286
}
287
288
// for backward compatibility
289
#MozillaGtkWidget {
290
> widget {
291
> menubar {
292
color: hint($on-titlebar);
293
294
&:hover {
295
color: $on-titlebar;
296
}
297
298
&:disabled {
299
color: disabled-hint($on-titlebar);
300
}
301
}
302
303
> frame {
304
color: stroke($on-surface);
305
}
306
}
307
308
menu > separator {
309
color: divider($on-surface);
310
}
311
}
312
313
/**
314
* Inkscape
315
*/
316
317
#ToolboxCommon {
318
> #AuxToolbox {
319
#StyleSwatch {
320
font-size: smaller;
321
}
322
323
#Kludge {
324
padding: 0;
325
}
326
327
spinbutton,
328
entry {
329
min-height: 32px;
330
}
331
332
button:not(.up):not(.down) {
333
min-height: 24px;
334
min-width: 16px;
335
padding: 4px 8px;
336
border-radius: $corner-radius;
337
}
338
339
spinbutton button {
340
border-width: 4px;
341
}
342
}
343
344
> toolbar.vertical {
345
margin-top: -4px;
346
347
button {
348
min-height: 24px;
349
min-width: 24px;
350
padding: 4px;
351
border-radius: $corner-radius;
352
}
353
}
354
}
355
356
#CanvasTable {
357
button {
358
min-height: 16px;
359
min-width: 16px;
360
padding: 0;
361
}
362
363
#HorizontalScrollbar {
364
border-top: 1px solid divider($on-surface);
365
}
366
367
#VerticalScrollbar {
368
&:dir(ltr) {
369
border-left: 1px solid divider($on-surface);
370
}
371
372
&:dir(rtl) {
373
border-right: 1px solid divider($on-surface);
374
}
375
}
376
}
377
378
#Canvas_and_Dock {
379
frame > border {
380
border: none;
381
}
382
383
// each canvases' titlebar
384
widget > widget {
385
> button.flat {
386
min-height: 16px;
387
min-width: 16px;
388
padding: 4px;
389
}
390
391
> box.horizontal image {
392
padding: 4px;
393
}
394
}
395
396
// vertical dock buttons
397
box.horizontal > box.vertical > button.flat {
398
min-height: 16px;
399
min-width: 24px;
400
padding: 8px 4px;
401
}
402
}
403
404
/**
405
* Synapse
406
*/
407
408
box.vertical > widget > widget:selected {
409
background-color: $overlay-selected;
410
}
411