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.

 _apps.scss

View raw Download
text/plain • 13.66 kiB
ASCII text
        
            
1
// floating status bar
2
.floating-bar {
3
@extend %osd;
4
5
// @extend .toolbar.osd;
6
7
min-height: 32px;
8
padding: 0;
9
border-style: solid solid none;
10
border-width: 1px;
11
border-color: $borders_color;
12
border-radius: (2px + 1px) (2px + 1px) 0 0;
13
background-color: $base_color;
14
background-clip: $extra_background_clip;
15
transition: $longer_transition, border-width 0;
16
17
&.left {
18
margin-right: 8px - 1px;
19
border-left-style: none;
20
border-top-left-radius: 0;
21
}
22
23
&.right {
24
margin-left: 8px - 1px;
25
border-right-style: none;
26
border-top-right-radius: 0;
27
}
28
29
button {
30
min-height: 24px;
31
min-width: 24px;
32
margin: 4px;
33
padding: 0;
34
}
35
}
36
37
38
/************
39
* Nautilus *
40
************/
41
// based css:
42
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css
43
// hard-coded css:
44
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css
45
.nautilus-window,
46
.nautilus-window notebook,
47
.nautilus-window notebook > stack {
48
background: $base_color;
49
}
50
51
.nautilus-canvas-item {
52
// border-radius: 2px;
53
}
54
55
.nautilus-canvas-item.dim-label,
56
.nautilus-list-dim-label {
57
// @extend .dim-label;
58
}
59
60
.nautilus-canvas-item.dim-label:selected,
61
.nautilus-list-dim-label:selected {
62
}
63
64
.nautilus-desktop.nautilus-canvas-item {
65
// background-color: scale-alpha(#000000, $lower_opacity);
66
color: $inversed_fg_color;
67
text-shadow: $z-depth-1;
68
}
69
70
.nautilus-desktop.nautilus-canvas-item:selected {
71
// color: $inversed_fg_color;
72
text-shadow: none;
73
}
74
75
// Toolbar
76
@keyframes needs_attention_keyframes {
77
0% {background-color: transparent; }
78
50% {background-color: $track_color; }
79
100% {background-color: transparent; }
80
}
81
82
.nautilus-operations-button-needs-attention {
83
color: $accent_color;
84
animation: needs_attention_keyframes 2s $standard_curve;
85
}
86
87
.nautilus-operations-button-needs-attention-multiple {
88
color: $accent_color;
89
animation: needs_attention_keyframes 2s $standard_curve;
90
animation-iteration-count: 2;
91
}
92
93
.disk-space-display {
94
// border-style: solid;
95
// border-width: 2px;
96
}
97
98
.disk-space-display.unknown {
99
background-color: $warning_color;
100
}
101
102
.disk-space-display.used {
103
background-color: $primary_color;
104
}
105
106
.disk-space-display.free {
107
background-color: $track_color;
108
color: $disabled_fg_color;
109
}
110
111
// View
112
.nautilus-list-view .view {
113
// border-bottom: 1px solid $borders_color;
114
}
115
116
// Hide superfluous treeview drop target indication
117
.nautilus-list-view .view.dnd {
118
// border-style: none;
119
}
120
121
// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
122
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
123
.documents-entry-tag {
124
// min-height: 24px;
125
margin: 3px -2px 3px 8px;
126
padding: 0 8px;
127
border-radius: $circular_radius;
128
box-shadow: none;
129
background-color: $primary_color;
130
color: $inversed_fg_color;
131
132
&:hover { box-shadow: $z-depth-1; }
133
}
134
135
.documents-entry-tag.button {
136
// @extend %simple_flat_button;
137
138
// min-height: 24px;
139
// min-width: 24px;
140
margin: 0 -2px;
141
padding: 4px;
142
border-radius: $circular_radius;
143
box-shadow: none;
144
color: $secondary_inversed_fg_color;
145
146
&:hover, &:active { color: $inversed_fg_color; }
147
}
148
149
// Workaround for the double border of the searchbar since we use a revealer which
150
// always allocates at least 1 pixel
151
.nautilus-window searchbar { border-top: 1px solid $borders_color; }
152
153
.nautilus-window .searchbar-container { margin-top: -1px; }
154
155
156
/*********
157
* gedit *
158
*********/
159
// based css:
160
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
161
// hard-coded css:
162
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css
163
.open-document-selector-treeview:hover {
164
}
165
166
.open-document-selector-treeview:selected:hover {
167
}
168
169
/* Only normal state is handle */
170
.open-document-selector-name-label {
171
font-weight: bold;
172
}
173
174
/* Only normal state is handle */
175
.open-document-selector-path-label {
176
color: gtkalpha(currentColor, $hint_opacity);
177
font-size: smaller;
178
179
// @extend .dim-label;
180
}
181
182
.gedit-document-panel {
183
background-color: $lighter_bg_color;
184
}
185
186
.gedit-document-panel row:selected {
187
}
188
189
.gedit-document-panel-group-row,
190
.gedit-document-panel-group-row:hover {
191
border-top: 1px solid gtkalpha(currentColor, 0.3);
192
}
193
194
.gedit-document-panel-group-row:first-child,
195
.gedit-document-panel-group-row:first-child:hover {
196
border-top: 0px;
197
}
198
199
/* Try to look as the notebook tab close button */
200
.gedit-document-panel row button.flat {
201
margin-top: 8px;
202
margin-bottom: 8px;
203
204
@extend %small_button;
205
}
206
207
.gedit-side-panel-paned statusbar {
208
border-top: 1px solid $borders_color;
209
}
210
211
.gedit-search-slider {
212
margin: 4px 4px 8px;
213
214
.gedit-search-entry-occurrences-tag {
215
all: unset;
216
padding: 0 4px;
217
color: gtkalpha(currentColor, $hint_opacity);
218
}
219
220
entry {
221
&:dir(ltr) {
222
margin-right: -$medium_size * 2;
223
padding-right: $medium_size * 2 + 8px;
224
225
.gedit-search-entry-occurrences-tag { margin-right: -8px; }
226
}
227
228
&:dir(rtl) {
229
margin-left: -$medium_size * 2;
230
padding-left: $medium_size * 2 + 8px;
231
232
.gedit-search-entry-occurrences-tag { margin-left: -8px; }
233
}
234
235
&.error ~ button {
236
color: $secondary_inversed_fg_color;
237
238
&:hover, &:active { color: $inversed_fg_color; }
239
240
&:disabled { color: $disabled_secondary_inversed_fg_color; }
241
}
242
}
243
244
button {
245
@extend %simple_flat_button;
246
247
&:dir(ltr),
248
&:dir(rtl) { @extend %linked; }
249
}
250
}
251
252
// Yeah this is ugly
253
.gedit-search-slider .linked:not(.vertical) > entry,
254
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
255
border-radius: 2px;
256
}
257
258
259
/**************
260
* Tweak Tool *
261
**************/
262
// hard-coded css:
263
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css
264
// the sidebar
265
.tweak-categories {
266
// padding: 4px 0;
267
// background-color: shade(@theme_bg_color, 0.99);
268
background-image: image($lighter_bg_color);
269
270
// hide separators
271
separator {
272
min-width: 0;
273
min-height: 0;
274
background: transparent;
275
}
276
}
277
278
.tweak {
279
padding: 3px;
280
// padding-top: 3px;
281
282
&.title:hover { box-shadow: none; }
283
}
284
285
.tweak-group-white,
286
.tweak-white,
287
.tweak-white:hover {
288
// background-color: white;
289
background-image: image($base_color);
290
}
291
292
.tweak-startup,
293
.tweak-startup:hover {
294
// background-color: lighter(shade(@theme_bg_color, 0.9));
295
background-image: image($base_color);
296
}
297
298
.tweak-group-startup {
299
// background-color: @view_separators;
300
background-image: image($base_color);
301
border: 1px solid $borders_color;
302
}
303
304
305
/***********
306
* Builder *
307
***********/
308
// based css:
309
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
310
// hard-coded css:
311
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css
312
//
313
// Titlebar adjustments for workbench
314
//
315
// This is needed due to our placement of headerbar inside of a
316
// stack. We were seeing black edges around the header bar, and
317
// improper radius on the headerbar.
318
//
319
workbench stack.titlebar {
320
padding: 0;
321
// box-shadow: none;
322
}
323
324
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
325
border-radius: 2px 2px 0 0;
326
// box-shadow: none;
327
}
328
329
perspectiveswitcher {
330
background-color: $bg_color;
331
}
332
333
perspectiveswitcher button {
334
}
335
336
perspectiveswitcher button:hover {
337
}
338
339
perspectiveswitcher button:checked {
340
color: $primary_color;
341
}
342
343
//
344
// Layout tab and tab bar tweaks
345
//
346
// The following makes the layout stack header look similar to a tab bar.
347
//
348
layouttabbar {
349
border-bottom: 1px solid $borders_color;
350
background-color: $bg_color;
351
}
352
353
layouttabbar button { @extend %flat_button; }
354
355
layouttabbar > box > button {
356
margin: (40px - $medium_size) / 2 0;
357
// border-radius: 0;
358
}
359
360
layouttab {
361
margin: 0 8px; // not working
362
border-style: none solid;
363
border-width: 1px;
364
border-color: $borders_color;
365
box-shadow: inset 0 -2px $primary_color;
366
background-color: $base_color;
367
}
368
369
layouttab separator.vertical {
370
margin: 8px 4px;
371
}
372
373
layouttab button {
374
&.text-button, &.image-button, & {
375
margin-top: 8px;
376
margin-bottom: 8px;
377
padding: 0 4px;
378
}
379
}
380
381
//
382
// Close button styling for layouttab.
383
//
384
layouttab > box > button.close {
385
border-radius: $circular_radius;
386
}
387
388
layout {
389
border: 1px solid $borders_color;
390
-PnlDockBin-handle-size: 1;
391
}
392
393
entry.search-missing {
394
background-color: $error_color;
395
color: $inversed_fg_color;
396
}
397
398
// tweak icons for treeviews
399
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
400
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }
401
402
dockbin {
403
border: 1px solid $borders_color;
404
-PnlDockBin-handle-size: 1;
405
}
406
407
dockpaned {
408
border: 1px solid $borders_color;
409
}
410
411
eggsearchbar box.search-bar {
412
padding: 0 8px;
413
border-bottom: 1px solid $borders_color;
414
background-color: $bg_color;
415
}
416
417
docktabstrip {
418
padding: 0 8px;
419
border-bottom: 1px solid $borders_color;
420
background-color: $bg_color;
421
}
422
423
docktab {
424
transition: $longer_transition;
425
min-height: $small_size;
426
min-width: $small_size;
427
margin-bottom: -1px;
428
padding: $container_padding 6px;
429
430
outline-offset: -6px;
431
432
border-width: 1px; // for reorderable tabs
433
border-color: transparent; //
434
435
color: $secondary_fg_color;
436
font-weight: 500;
437
438
&:hover {
439
box-shadow: inset 0 -2px $track_color;
440
color: $fg_color;
441
}
442
443
&:checked {
444
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
445
box-shadow: inset 0 -2px $primary_color;
446
color: $fg_color;
447
}
448
}
449
450
dockoverlayedge {
451
background-color: $bg_color;
452
}
453
454
dockoverlayedge docktabstrip {
455
padding: 0;
456
border: none;
457
}
458
459
dockoverlayedge.left-edge docktab:checked {
460
border-right-color: $primary_color;
461
border-bottom-color: transparent;
462
}
463
464
dockoverlayedge.right-edge docktab:checked {
465
border-left-color: $primary_color;
466
border-bottom-color: transparent;
467
}
468
469
pillbox {
470
background-color: $bg_color;
471
border-radius: 2px;
472
}
473
474
layoutpane entry.search {
475
@extend %entry.flat;
476
477
box-shadow: inset 0 -1px $borders_color;
478
background-color: $base_color;
479
}
480
481
editortweak entry.search {
482
@extend %entry.flat;
483
484
margin-bottom: -1px;
485
box-shadow: none;
486
}
487
488
// styling for editor search
489
frame.gb-search-frame {
490
// border-bottom-left-radius: 5px;
491
border-bottom-right-radius: 5px;
492
}
493
494
.gb-search-entry-occurrences-tag {
495
box-shadow: none;
496
background-color: transparent;
497
}
498
499
//
500
// Keep search bar and layouttab height in sync.
501
//
502
docktabstrip {
503
min-height: 39px;
504
}
505
506
layouttabbar > box {
507
// min-height: 39px;
508
}
509
510
eggsearchbar > revealer > box {
511
// min-height: 39px;
512
}
513
514
eggsearchbar entry {
515
// min-height: 24px;
516
}
517
518
workbench preferences preferencesgroup list entry {
519
// background: none;
520
// min-height: 0px;
521
padding-top: 8px;
522
padding-bottom: 8px;
523
}
524
525
526
/***********
527
* Firefox *
528
***********/
529
menubar {
530
color: $secondary_inversed_fg_color;
531
532
&:hover { color: $inversed_fg_color; }
533
}
534
535
separator { color: $borders_color; }
536
537
/* FIXME: not working */
538
window.background > widget > check,
539
window.background > widget > radio {
540
margin: 0;
541
padding: 0;
542
}
543
544
window.background > widget > radio:checked {
545
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
546
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
547
border-image: none;
548
}
549
550
551
/***********
552
* Synapse *
553
***********/
554
box > widget > widget:selected { background-color: $primary_color; }
555
556
557
/*********
558
* Unity *
559
*********/
560
// based css:
561
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css
562
// Decorations
563
UnityDecoration {
564
-UnityDecoration-extents: 28px 0 0 0;
565
-UnityDecoration-input-extents: 8px;
566
567
-UnityDecoration-shadow-offset-x: 0;
568
-UnityDecoration-shadow-offset-y: 3px;
569
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
570
-UnityDecoration-active-shadow-radius: 18px;
571
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
572
-UnityDecoration-inactive-shadow-radius: 6px;
573
574
-UnityDecoration-glow-size: 8px;
575
-UnityDecoration-glow-color: $primary_color;
576
577
-UnityDecoration-title-indent: 4px;
578
-UnityDecoration-title-fade: 32px;
579
-UnityDecoration-title-alignment: 0.0;
580
}
581
582
UnityDecoration.top {
583
padding: 0 2px;
584
border-style: none;
585
border-radius: 2px 2px 0 0;
586
// box-shadow: inset 0 1px $secondary_highlight_color;
587
box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1);
588
background-color: $secondary_titlebar_color;
589
color: $inversed_fg_color;
590
}
591
592
UnityDecoration.top:backdrop {
593
color: $secondary_inversed_fg_color;
594
}
595
596
UnityDecoration.left,
597
UnityDecoration.right {
598
}
599
600
UnityDecoration.bottom {
601
}
602
603
UnityDecoration.menuitem,
604
UnityDecoration .menuitem {
605
color: gtkalpha(currentColor, $enabled_opacity);
606
}
607
608
UnityDecoration.menubar.menuitem:hover,
609
UnityDecoration.menubar .menuitem *:hover {
610
box-shadow: inset 0 -2px currentColor;
611
background-color: transparent;
612
color: currentColor;
613
}
614
615
.background:not(.csd) headerbar:not(.titlebar) {
616
border-radius: 0;
617
box-shadow: none;
618
619
&.inline-toolbar { border-style: none; }
620
}
621
622
SheetStyleDialog.unity-force-quit {
623
// background-color: $bg_color;
624
}
625
626
// Panel Style
627
UnityPanelWidget,
628
.unity-panel {
629
background-color: $topbar_color;
630
background-image: image($topbar_color);
631
color: $inversed_fg_color;
632
}
633
634
UnityPanelWidget:backdrop,
635
.unity-panel:backdrop {
636
color: $secondary_inversed_fg_color;
637
}
638
639
.unity-panel.menubar,
640
.unity-panel .menubar {
641
}
642
643
.unity-panel.menuitem,
644
.unity-panel .menuitem {
645
color: gtkalpha(currentColor, $enabled_opacity);
646
}
647
648
.unity-panel.menubar.menuitem:hover,
649
.unity-panel.menubar .menuitem *:hover {
650
box-shadow: inset 0 -2px currentColor;
651
background-color: transparent;
652
color: currentColor;
653
}
654
655
@keyframes playbackmenuitem_spinner {
656
to { -gtk-icon-transform: rotate(1turn); }
657
}
658
659
.menu IdoPlaybackMenuItem.menuitem:active {
660
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
661
animation: playbackmenuitem_spinner 1s infinite linear;
662
color: $primary_color;
663
}
664
665