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