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.

 _gnome.scss

View raw Download
text/plain • 16.8 kiB
ASCII text
        
            
1
/************
2
* Nautilus *
3
************/
4
// based css:
5
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css
6
// hard-coded css:
7
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css
8
9
.nautilus-window,
10
.nautilus-window notebook,
11
.nautilus-window notebook > stack {
12
background-color: $base_color;
13
}
14
15
.nautilus-window paned > separator {
16
background-color: $bg_color;
17
}
18
19
.nautilus-canvas-item {
20
@extend iconview;
21
22
// border-radius: $material_radius;
23
}
24
25
.nautilus-canvas-item.dim-label,
26
.nautilus-list-dim-label {
27
// @extend .dim-label;
28
}
29
30
.nautilus-desktop.nautilus-canvas-item:not(:selected) {
31
// background-color: scale-alpha($black, $lower_opacity);
32
color: $inverse_fg_color;
33
text-shadow: $shadow_1;
34
}
35
36
// Toolbar
37
@keyframes needs_attention_keyframes {
38
to { background-color: $fill_color; }
39
}
40
41
.nautilus-operations-button-needs-attention {
42
animation: needs_attention_keyframes $longer_duration $standard_curve 2 alternate;
43
}
44
45
.nautilus-operations-button-needs-attention-multiple {
46
animation: needs_attention_keyframes $longer_duration $standard_curve 4 alternate;
47
}
48
49
// Floating status bar
50
.nautilus-window .floating-bar {
51
@extend %osd;
52
53
// @extend .toolbar.osd;
54
55
min-height: 32px;
56
padding: 0;
57
border-style: solid solid none;
58
border-width: 1px;
59
border-color: $border_color;
60
border-radius: (2px + 1px) (2px + 1px) 0 0;
61
background-color: $base_color;
62
background-clip: $extra_background_clip;
63
transition: $longer_transition, border-width 0;
64
65
&.bottom.left { // axes left border and border radius
66
margin-right: 8px - 1px;
67
border-left-style: none;
68
border-top-left-radius: 0;
69
}
70
71
&.bottom.right { // axes right border and border radius
72
margin-left: 8px - 1px;
73
border-right-style: none;
74
border-top-right-radius: 0;
75
}
76
77
button {
78
margin: (32px - $small_size) / 2;
79
80
@extend %small_button;
81
}
82
}
83
84
.disk-space-display {
85
// border-style: solid;
86
// border-width: 2px;
87
88
&.unknown { background-color: $warning_color; }
89
90
&.used { background-color: $primary_color; }
91
92
&.free {
93
background-color: $fill_color;
94
color: $disabled_fg_color;
95
}
96
}
97
98
// View
99
// Hide superfluous treeview drop target indication
100
.nautilus-list-view .view:not(.dnd) {
101
// border-bottom: 1px solid $border_color;
102
}
103
104
// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
105
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
106
.documents-entry-tag {
107
// min-height: 24px;
108
margin: 3px -2px 3px 8px;
109
padding: 0 8px;
110
border-radius: $circular_radius;
111
box-shadow: none;
112
background-color: $primary_color;
113
color: $inverse_fg_color;
114
115
&:hover { box-shadow: $shadow_1; }
116
}
117
118
.documents-entry-tag.button {
119
// @extend %simple_flat_button;
120
121
// min-height: 24px;
122
// min-width: 24px;
123
margin: 0 -2px;
124
padding: 4px;
125
border-radius: $circular_radius;
126
box-shadow: none;
127
color: $secondary_inverse_fg_color;
128
129
&:hover, &:active { color: $inverse_fg_color; }
130
}
131
132
// Workaround for the double border of the searchbar since we use a revealer which
133
// always allocates at least 1 pixel
134
.nautilus-window {
135
searchbar { border-top: 1px solid $border_color; }
136
137
.searchbar-container { margin-top: -1px; }
138
}
139
140
.nautilus-window headerbar > revealer > button { @extend %circular_button; }
141
142
.conflict-row:not(:selected) { background-color: mix($warning_color, $base_color, percentage($lower_opacity)); }
143
144
// Icon view
145
.nautilus-window flowboxchild {
146
> widget > .icon-item-background {
147
padding: 4px;
148
border-radius: $material_radius;
149
}
150
151
// > widget > box > .icon-background { background-color: black; }
152
153
&:selected {
154
background-color: transparent;
155
156
> widget > .icon-item-background { background-color: $primary_color; }
157
}
158
}
159
160
dialog.background > box.dialog-vbox.vertical > grid.horizontal {
161
> scrolledwindow.frame { border-style: none; }
162
163
> box.horizontal:last-child {
164
margin: -6px 0 0 -6px;
165
border-top: 1px solid $border_color;
166
167
> label { margin: 0 8px; }
168
169
> box > button { border-radius: 0; }
170
}
171
}
172
173
.nautilus-menu-sort-heading {
174
// min-height: 26px;
175
// padding-left: 5px;
176
// padding-right: 5px;
177
margin: 1px 3px;
178
font-weight: 500;
179
180
&:disabled { color: $tertiary_fg_color; }
181
}
182
183
// Tweaks to fix the messy sizing of the popover menu
184
.nautilus-window > popover.menu:not(:last-child) {
185
padding: 3px;
186
187
> stack > box > box > box {
188
margin-top: -6px;
189
190
> box {
191
margin-bottom: -6px;
192
193
&.linked { margin-top: 1px; }
194
}
195
}
196
197
separator { margin-bottom: -2px; }
198
}
199
200
201
/*********
202
* gedit *
203
*********/
204
// based css:
205
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
206
// hard-coded css:
207
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css
208
209
// Only normal state is handle
210
.open-document-selector-name-label {
211
font-weight: bold;
212
}
213
214
// Only normal state is handle
215
.open-document-selector-path-label {
216
color: gtkalpha(currentColor, $tertiary_opacity);
217
font-size: smaller;
218
219
// @extend .dim-label;
220
}
221
222
.gedit-document-panel {
223
background-color: $lighter_bg_color;
224
}
225
226
.gedit-document-panel-group-row:not(:first-child) {
227
border-top: 1px solid $border_color;
228
}
229
230
// Try to look as the notebook tab close button
231
.gedit-document-panel row button.flat {
232
margin-top: 8px;
233
margin-bottom: 8px;
234
235
@extend %small_button;
236
}
237
238
.gedit-side-panel-paned statusbar {
239
border-top: 1px solid $border_color;
240
}
241
242
.gedit-search-slider {
243
margin: 4px 4px 8px;
244
245
entry {
246
&:dir(ltr),
247
&:dir(rtl) { // specificity bump
248
border-radius: 2px;
249
250
.gedit-search-entry-occurrences-tag {
251
all: unset;
252
color: gtkalpha(currentColor, $tertiary_opacity);
253
}
254
}
255
256
$buttons_width: $small_size * 2 + $container_padding * 3;
257
258
&:dir(ltr) {
259
margin-right: -$buttons_width;
260
padding-right: $buttons_width;
261
262
.gedit-search-entry-occurrences-tag { margin-left: $container_padding; }
263
264
image.right { margin-right: 0; }
265
}
266
267
&:dir(rtl) {
268
margin-left: -$buttons_width;
269
padding-left: $buttons_width;
270
271
.gedit-search-entry-occurrences-tag { margin-right: $container_padding; }
272
273
image.left { margin-left: 0; }
274
}
275
276
&.error ~ button {
277
color: $secondary_inverse_fg_color;
278
279
&:hover, &:active { color: $inverse_fg_color; }
280
281
&:disabled { color: $disabled_secondary_inverse_fg_color; }
282
}
283
}
284
285
button {
286
border: solid $container_padding transparent;
287
288
@extend %simple_flat_button;
289
290
&:dir(ltr),
291
&:dir(rtl) { @extend %small_button; } // specificity bump
292
293
&:last-child:dir(ltr),
294
&:not(:first-child):dir(rtl) { margin-left: -$container_padding / 2; }
295
296
&:first-child:dir(rtl),
297
&:not(:last-child):dir(ltr) { margin-right: -$container_padding / 2; }
298
}
299
}
300
301
frame.gedit-map-frame > border {
302
&:dir(ltr) { border-style: none none none solid; }
303
&:dir(rtl) { border-style: none solid none none; }
304
}
305
306
307
/**************
308
* Tweak Tool *
309
**************/
310
// hard-coded css:
311
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css
312
313
// the sidebar
314
.tweak-categories {
315
// padding: 4px 0;
316
// background-color: shade(@theme_bg_color, 0.99);
317
background-image: image($lighter_bg_color);
318
319
// hide separators
320
separator {
321
min-width: 0;
322
min-height: 0;
323
background-color: transparent;
324
}
325
}
326
327
.tweak {
328
padding: 3px;
329
// padding-top: 3px;
330
331
&.title:hover { box-shadow: none; }
332
}
333
334
.tweak-group-white,
335
.tweak-white,
336
.tweak-white:hover {
337
// background-color: white;
338
background-image: image($base_color);
339
}
340
341
.tweak-startup,
342
.tweak-startup:hover {
343
// background-color: lighter(shade(@theme_bg_color, 0.9));
344
background-image: image($base_color);
345
}
346
347
.tweak-group-startup {
348
// background-color: @view_separators;
349
background-image: image($base_color);
350
border: 1px solid $border_color;
351
}
352
353
354
/***********
355
* Builder *
356
***********/
357
// based css:
358
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
359
// hard-coded css:
360
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css
361
362
// Layout tab and tab bar tweaks
363
// The following makes the layout stack header look similar to a tab bar.
364
layouttabbar {
365
border-bottom: 1px solid $border_color;
366
background-color: $bg_color;
367
368
button { @extend %flat_button; }
369
370
> box > button {
371
margin: (40px - $medium_size) / 2 0;
372
// border-radius: 0;
373
}
374
}
375
376
layouttab {
377
margin: 0 8px; // not working
378
border-style: none solid;
379
border-width: 1px;
380
border-color: $border_color;
381
box-shadow: inset 0 -2px $primary_color;
382
background-color: $base_color;
383
384
separator.vertical { margin: 8px 4px; }
385
386
button {
387
&.text-button, &.image-button, & {
388
margin-top: 8px;
389
margin-bottom: 8px;
390
padding: 0 4px;
391
}
392
}
393
394
// Close button styling for layouttab.
395
> box > button.close { border-radius: $circular_radius; }
396
}
397
398
layout {
399
border: 1px solid $border_color;
400
-PnlDockBin-handle-size: 1;
401
}
402
403
entry.search-missing {
404
background-color: $error_color;
405
color: $inverse_fg_color;
406
}
407
408
// tweak icons for treeviews
409
window.workbench treeview.image {
410
color: gtkalpha(currentColor, $tertiary_opacity);
411
412
&:selected { color: $tertiary_inverse_fg_color; }
413
}
414
415
popover.popover-selector list {
416
padding: 8px - 2px;
417
418
row {
419
border-radius: 2px;
420
421
image {
422
&:dir(ltr) { margin-right: 6px; }
423
&:dir(rtl) { margin-left: 6px; }
424
}
425
426
.accel {
427
&:dir(ltr) { margin-left: 6px; }
428
&:dir(rtl) { margin-right: 6px; }
429
}
430
}
431
}
432
433
omnibar {
434
&.linked:not(.vertical) entry { border-radius: 2px; }
435
436
&:not(:hover):not(:active) entry { color: $secondary_fg_color; }
437
}
438
439
popover.omnibar list row:not(:last-child) {
440
border-bottom: 1px solid $border_color;
441
}
442
443
entry.preferences-search {
444
@extend %entry.flat;
445
446
box-shadow: inset 0 -1px $border_color;
447
background-color: $base_color;
448
449
// doesn't work properly
450
// &:dir(ltr) { border-right: 1px solid $border_color; }
451
// &:dir(rtl) { border-left: 1px solid $border_color; }
452
}
453
454
preferences stacksidebar.sidebar {
455
list { background-color: $lighter_bg_color; }
456
457
&:dir(ltr),
458
&:dir(rtl) { list { border-style: none; }}
459
460
list separator {
461
min-width: 0;
462
min-height: 0;
463
background-color: transparent;
464
}
465
}
466
467
preferences > box > box {
468
&:dir(ltr) { border-right: 1px solid $border_color; }
469
&:dir(rtl) { border-left: 1px solid $border_color; }
470
}
471
472
popover.messagepopover {
473
&.background { padding: 0; }
474
475
.popover-action-area button {
476
@extend %simple_flat_button;
477
478
padding: 8px 16px;
479
border-top: 1px solid $border_color;
480
border-radius: 0;
481
482
&:first-child { border-bottom-left-radius: 2px; }
483
484
&:last-child { border-bottom-right-radius: 2px; }
485
}
486
487
.popover-content-area { margin: 16px; }
488
}
489
490
popover.transfers list {
491
background-color: transparent;
492
493
row:not(:first-child) { border-top: 1px solid $border_color; }
494
495
row > box { padding: 10px; }
496
}
497
498
dockbin {
499
border: 1px solid $border_color;
500
-PnlDockBin-handle-size: 1;
501
}
502
503
dockpaned {
504
border: 1px solid $border_color;
505
}
506
507
eggsearchbar box.search-bar {
508
padding: 0 8px;
509
border-bottom: 1px solid $border_color;
510
background-color: $bg_color;
511
}
512
513
docktabstrip {
514
padding: 0 8px;
515
border-bottom: 1px solid $border_color;
516
background-color: $bg_color;
517
}
518
519
docktab {
520
transition: $longer_transition,
521
background-size 0,
522
background-image 0;
523
min-height: $small_size;
524
min-width: $small_size;
525
margin-bottom: -1px;
526
padding: $container_padding 6px;
527
528
outline-offset: -6px;
529
530
border-width: 1px; // for reorderable tabs
531
border-color: transparent; //
532
533
background-image: radial-gradient(circle farthest-corner at center,
534
$primary_color 10%,
535
transparent 0%);
536
background-repeat: no-repeat;
537
background-position: center;
538
background-size: 0% 0%;
539
540
color: $secondary_fg_color;
541
font-weight: 500;
542
543
&:hover {
544
box-shadow: inset 0 -2px $fill_color;
545
color: $fg_color;
546
}
547
548
&:checked {
549
transition: $longer_transition,
550
background-size $longer_duration $deceleration_curve,
551
background-image $longer_duration + $ripple_duration $deceleration_curve;
552
box-shadow: inset 0 -2px $primary_color;
553
background-image: radial-gradient(circle farthest-corner at center,
554
transparent 10%,
555
transparent 0%);
556
background-size: 1000% 1000%;
557
color: $fg_color;
558
}
559
}
560
561
dockoverlayedge {
562
background-color: $bg_color;
563
564
docktabstrip {
565
padding: 0;
566
border: none;
567
}
568
569
&.left-edge docktab {
570
&:hover { box-shadow: inset -2px 0 $fill_color; }
571
&:checked { box-shadow: inset -2px 0 $primary_color; }
572
}
573
574
&.right-edge docktab {
575
&:hover { box-shadow: inset 2px 0 $fill_color; }
576
&:checked { box-shadow: inset 2px 0 $primary_color; }
577
}
578
}
579
580
pillbox {
581
background-color: $bg_color;
582
border-radius: 2px;
583
}
584
585
buildperspective row {
586
// padding: 10px;
587
}
588
589
layoutpane entry.search {
590
@extend %entry.flat;
591
592
box-shadow: inset 0 -1px $border_color;
593
background-color: $base_color;
594
}
595
596
editortweak entry.search {
597
@extend %entry.flat;
598
599
margin-bottom: -1px;
600
box-shadow: none;
601
}
602
603
//
604
// let's tweak hard-coded elements
605
//
606
607
.gb-search-entry-occurrences-tag {
608
box-shadow: none;
609
background-color: transparent;
610
}
611
612
// Keep search bar and layouttab height in sync.
613
// layouttabbar > box,
614
// eggsearchbar > revealer > box,
615
docktabstrip {
616
min-height: 39px;
617
}
618
619
eggsearchbar entry {
620
// min-height: 24px;
621
}
622
623
window.workbench preferences preferencesgroup list entry {
624
// background: none;
625
// min-height: 0px;
626
padding-top: 8px;
627
padding-bottom: 8px;
628
}
629
630
button.run-arrow-button {
631
// min-width: 12px;
632
padding-left: ($medium_size - 16px) / 2;
633
padding-right: ($medium_size - 16px) / 2;
634
}
635
636
637
/**********
638
* Photos *
639
**********/
640
// based css:
641
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css
642
643
GdMainIconView.content-view {
644
-GdMainIconView-icon-size: 48;
645
646
// Make spinner visible on both dark and bright backgrounds w/o making
647
// it look ugly/weird.
648
// &.cell:active { color: $tertiary_fg_color; }
649
}
650
651
.documents-counter {
652
margin: 8px;
653
border-radius: $circular_radius;
654
box-shadow: $shadow_2;
655
background-color: $accent_color;
656
color: $inverse_fg_color;
657
font-weight: bold;
658
}
659
660
.photos-entry-tag {
661
@extend .documents-entry-tag;
662
}
663
664
.documents-scrolledwin.frame {
665
border-style: none;
666
}
667
668
.photos-icon-bg {
669
}
670
671
.photos-fade-in {
672
opacity: 1;
673
transition: opacity $shorter_duration $deceleration_curve;
674
}
675
676
.photos-fade-out {
677
opacity: 0;
678
transition: opacity $shorter_duration $deceleration_curve;
679
}
680
681
.photos-collection-icon {
682
}
683
684
overlay grid.horizontal > revealer > scrolledwindow.frame {
685
&:dir(ltr) { border-style: none none none solid; }
686
&:dir(rtl) { border-style: none solid none none; }
687
}
688
689
690
/*********
691
* Music *
692
*********/
693
// hard-coded css:
694
// https://git.gnome.org/browse/gnome-music/tree/data/application.css
695
696
.side-panel:dir(ltr) {
697
// border-width: 0 1px 0 0;
698
border-style: solid;
699
border-color: $border_color;
700
}
701
702
.side-panel:dir(rtl) {
703
// border-width: 0 0 0 1px;
704
border-style: solid;
705
border-color: $border_color;
706
}
707
708
.side-panel .view {
709
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
710
background-image: image($lighter_bg_color);
711
712
&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
713
}
714
715
.side-panel .view:selected {
716
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
717
background-image: image($primary_color);
718
719
&:hover { background-image: image(mix($inverse_fg_color, $primary_color, percentage(0.05))); }
720
}
721
722
.songs-list {
723
// box-shadow: inset 0 -1px shade(@borders, 1.30);
724
// background-color: @theme_bg_color;
725
726
&:hover { background-image: image($row_fill_color); }
727
}
728
729
frame.documents-dropdown {
730
@extend toolbar.osd;
731
732
margin: 8px;
733
734
> border { border: none; }
735
}
736
737
box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
738
border-bottom: 1px solid $border_color;
739
740
button > widget {
741
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
742
// -GtkArrow-arrow-scaling: 1;
743
}
744
}
745
746
747
/*********
748
* To Do *
749
*********/
750
taskrow {
751
transition: $shorter_transition;
752
margin: 0 -8px;
753
754
&:hover { transition: none; }
755
756
label { margin: 0 8px; }
757
758
image { min-width: 16px; }
759
}
760
761
task-list-view > box > revealer > box > button {
762
margin: (12px * 2 - $medium_size) / 2;
763
}
764
765
766
/*******
767
* eog *
768
*******/
769
#eog-thumb-nav {
770
scrolledwindow { border-top: none; }
771
772
button { -gtk-outline-radius: 2px; }
773
}
774
775
776
/*************
777
* Evolution *
778
*************/
779
frame.taskbar > border { border-style: solid none none; }
780
781
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
782
783
784
/********
785
* gitg *
786
********/
787
frame.commit-frame > border { border-style: solid none none; }
788
789
790
/**************
791
* Characters *
792
**************/
793
box.dialog-vbox scrolledwindow.related { border: 1px solid $border_color; }
794
795
list.categories { background-image: image($lighter_bg_color); }
796
797
798
/**************
799
* Calculator *
800
**************/
801
button.title label { min-height: $medium_size; }
802