A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _misc.scss

View raw Download
text/plain • 7.4 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-alt;
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