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.2 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
border-color: opacify(stroke($on-surface), $background);
205
}
206
207
> entry,
208
> button > button {
209
border: 1px solid stroke($on-surface);
210
border-radius: $corner-radius;
211
box-shadow: none;
212
213
&:disabled {
214
border-color: disabled-stroke($on-surface);
215
}
216
}
217
218
> entry {
219
min-height: 32px - 2px;
220
background-color: $base;
221
222
&:focus {
223
border-color: $primary;
224
box-shadow: inset 0 0 0 1px $primary;
225
}
226
227
&:disabled {
228
background-color: $base;
229
}
230
}
231
232
> button > button {
233
padding: 4px 8px;
234
235
&:active {
236
background-size: 1000% 1000%;
237
}
238
}
239
240
// use 16px assets for hard-coded sizing
241
> checkbutton > check {
242
@extend %small_check;
243
}
244
245
> radiobutton > radio {
246
@extend %small_radio;
247
}
248
249
> checkbutton > check,
250
> radiobutton > radio {
251
margin: 0;
252
padding: 0;
253
}
254
255
// make check/radio visible regardless of whether the background is bright or dark
256
> checkbutton > check:not(:checked):not(:indeterminate),
257
> radiobutton > radio:not(:checked):not(:indeterminate) {
258
color: $grey-600;
259
260
&:disabled {
261
color: rgba($grey-600, .5);
262
}
263
}
264
}
265
266
// remove ugly border around the menus
267
menu {
268
// FIXME: The ugly border is still needed, since the menu doesn't
269
// draw its drop shadow in some environments. See:
270
// https://github.com/nana-4/materia-theme/issues/462
271
272
// border: none;
273
}
274
275
// Workaround: Firefox doesn't properly read color from
276
// menuitem:disabled, but from menuitem label:disabled.
277
menuitem label:disabled {
278
color: disabled($on-surface);
279
}
280
}
281
282
// for backward compatibility
283
#MozillaGtkWidget {
284
> widget {
285
> menubar {
286
color: hint($on-titlebar);
287
288
&:hover {
289
color: $on-titlebar;
290
}
291
292
&:disabled {
293
color: disabled-hint($on-titlebar);
294
}
295
}
296
297
> frame {
298
color: stroke($on-surface);
299
}
300
}
301
302
menu > separator {
303
color: divider($on-surface);
304
}
305
}
306
307
/**
308
* Inkscape
309
*/
310
311
#ToolboxCommon {
312
> #AuxToolbox {
313
#StyleSwatch {
314
font-size: smaller;
315
}
316
317
#Kludge {
318
padding: 0;
319
}
320
321
spinbutton,
322
entry {
323
min-height: 32px;
324
}
325
326
button:not(.up):not(.down) {
327
min-height: 24px;
328
min-width: 16px;
329
padding: 4px 8px;
330
border-radius: $corner-radius;
331
}
332
333
spinbutton button {
334
border-width: 4px;
335
}
336
}
337
338
> toolbar.vertical {
339
margin-top: -4px;
340
341
button {
342
min-height: 24px;
343
min-width: 24px;
344
padding: 4px;
345
border-radius: $corner-radius;
346
}
347
}
348
}
349
350
#CanvasTable {
351
button {
352
min-height: 16px;
353
min-width: 16px;
354
padding: 0;
355
}
356
357
#HorizontalScrollbar {
358
border-top: 1px solid divider($on-surface);
359
}
360
361
#VerticalScrollbar {
362
&:dir(ltr) {
363
border-left: 1px solid divider($on-surface);
364
}
365
366
&:dir(rtl) {
367
border-right: 1px solid divider($on-surface);
368
}
369
}
370
}
371
372
#Canvas_and_Dock {
373
frame > border {
374
border: none;
375
background-color: transparent;
376
}
377
378
// each canvases' titlebar
379
widget > widget {
380
> button.flat {
381
min-height: 16px;
382
min-width: 16px;
383
padding: 4px;
384
}
385
386
> box.horizontal image {
387
padding: 4px;
388
}
389
}
390
391
// vertical dock buttons
392
box.horizontal > box.vertical > button.flat {
393
min-height: 16px;
394
min-width: 24px;
395
padding: 8px 4px;
396
}
397
}
398
399
/**
400
* Synapse
401
*/
402
403
box.vertical > widget > widget:selected {
404
background-color: $overlay-selected;
405
}
406