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