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.87 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
.nautilus-window > popover.menu:not(:last-child) {
198
padding: 3px;
199
200
> stack > box > box > box {
201
margin-top: -6px;
202
203
> box {
204
margin-bottom: -6px;
205
206
&.linked { margin-top: 1px; }
207
}
208
}
209
210
separator { margin-bottom: -2px; }
211
}
212
213
214
/*********
215
* gedit *
216
*********/
217
// based css:
218
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
219
// hard-coded css:
220
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css
221
222
// Only normal state is handle
223
.open-document-selector-name-label {
224
font-weight: bold;
225
}
226
227
// Only normal state is handle
228
.open-document-selector-path-label {
229
color: gtkalpha(currentColor, $tertiary_opacity);
230
font-size: smaller;
231
232
// @extend .dim-label;
233
}
234
235
.gedit-document-panel {
236
background-color: $lighter_bg_color;
237
}
238
239
.gedit-document-panel-group-row {
240
border-top: 1px solid $border_color;
241
}
242
243
.gedit-document-panel-group-row:first-child {
244
border-top: none;
245
}
246
247
// Try to look as the notebook tab close button
248
.gedit-document-panel row button.flat {
249
margin-top: 8px;
250
margin-bottom: 8px;
251
252
@extend %small_button;
253
}
254
255
.gedit-side-panel-paned statusbar {
256
border-top: 1px solid $border_color;
257
}
258
259
.gedit-search-slider {
260
margin: 4px 4px 8px;
261
262
entry {
263
&:dir(ltr),
264
&:dir(rtl) { // specificity bump
265
border-radius: 2px;
266
267
.gedit-search-entry-occurrences-tag {
268
all: unset;
269
color: gtkalpha(currentColor, $tertiary_opacity);
270
}
271
}
272
273
$buttons_width: $small_size * 2 + $container_padding * 3;
274
275
&:dir(ltr) {
276
margin-right: -$buttons_width;
277
padding-right: $buttons_width;
278
279
.gedit-search-entry-occurrences-tag { margin-left: $container_padding; }
280
281
image.right { margin-right: 0; }
282
}
283
284
&:dir(rtl) {
285
margin-left: -$buttons_width;
286
padding-left: $buttons_width;
287
288
.gedit-search-entry-occurrences-tag { margin-right: $container_padding; }
289
290
image.left { margin-left: 0; }
291
}
292
293
&.error ~ button {
294
color: $secondary_inverse_fg_color;
295
296
&:hover, &:active { color: $inverse_fg_color; }
297
298
&:disabled { color: $disabled_secondary_inverse_fg_color; }
299
}
300
}
301
302
button {
303
border: solid $container_padding transparent;
304
305
@extend %simple_flat_button;
306
307
&:dir(ltr),
308
&:dir(rtl) { @extend %small_button; } // specificity bump
309
310
&:last-child:dir(ltr),
311
&:not(:first-child):dir(rtl) { margin-left: -$container_padding / 2; }
312
313
&:first-child:dir(rtl),
314
&:not(:last-child):dir(ltr) { margin-right: -$container_padding / 2; }
315
}
316
}
317
318
frame.gedit-map-frame > border {
319
&:dir(ltr) { border-style: none none none solid; }
320
&:dir(rtl) { border-style: none solid none none; }
321
}
322
323
324
/**************
325
* Tweak Tool *
326
**************/
327
// hard-coded css:
328
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css
329
330
// the sidebar
331
.tweak-categories {
332
// padding: 4px 0;
333
// background-color: shade(@theme_bg_color, 0.99);
334
background-image: image($lighter_bg_color);
335
336
// hide separators
337
separator {
338
min-width: 0;
339
min-height: 0;
340
background: transparent;
341
}
342
}
343
344
.tweak {
345
padding: 3px;
346
// padding-top: 3px;
347
348
&.title:hover { box-shadow: none; }
349
}
350
351
.tweak-group-white,
352
.tweak-white,
353
.tweak-white:hover {
354
// background-color: white;
355
background-image: image($base_color);
356
}
357
358
.tweak-startup,
359
.tweak-startup:hover {
360
// background-color: lighter(shade(@theme_bg_color, 0.9));
361
background-image: image($base_color);
362
}
363
364
.tweak-group-startup {
365
// background-color: @view_separators;
366
background-image: image($base_color);
367
border: 1px solid $border_color;
368
}
369
370
371
/***********
372
* Builder *
373
***********/
374
// based css:
375
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
376
// hard-coded css:
377
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css
378
379
// Titlebar adjustments for workbench
380
//
381
// This is needed due to our placement of headerbar inside of a
382
// stack. We were seeing black edges around the header bar, and
383
// improper radius on the headerbar.
384
//
385
workbench stack.titlebar {
386
padding: 0;
387
// box-shadow: none;
388
}
389
390
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
391
border-radius: 2px 2px 0 0;
392
// box-shadow: none;
393
}
394
395
// Layout tab and tab bar tweaks
396
// The following makes the layout stack header look similar to a tab bar.
397
layouttabbar {
398
border-bottom: 1px solid $border_color;
399
background-color: $bg_color;
400
}
401
402
layouttabbar button { @extend %flat_button; }
403
404
layouttabbar > box > button {
405
margin: (40px - $medium_size) / 2 0;
406
// border-radius: 0;
407
}
408
409
layouttab {
410
margin: 0 8px; // not working
411
border-style: none solid;
412
border-width: 1px;
413
border-color: $border_color;
414
box-shadow: inset 0 -2px $primary_color;
415
background-color: $base_color;
416
}
417
418
layouttab separator.vertical {
419
margin: 8px 4px;
420
}
421
422
layouttab button {
423
&.text-button, &.image-button, & {
424
margin-top: 8px;
425
margin-bottom: 8px;
426
padding: 0 4px;
427
}
428
}
429
430
// Close button styling for layouttab.
431
layouttab > box > button.close {
432
border-radius: $circular_radius;
433
}
434
435
layout {
436
border: 1px solid $border_color;
437
-PnlDockBin-handle-size: 1;
438
}
439
440
entry.search-missing {
441
background-color: $error_color;
442
color: $inverse_fg_color;
443
}
444
445
// tweak icons for treeviews
446
workbench treeview.image { color: gtkalpha(currentColor, $tertiary_opacity); }
447
448
workbench treeview.image:selected { color: $tertiary_inverse_fg_color; }
449
450
popover.popover-selector list {
451
padding: 8px - 2px;
452
}
453
454
popover.popover-selector list row {
455
border-radius: 2px;
456
}
457
458
popover.popover-selector list row image {
459
&:dir(ltr) { margin-right: 6px; }
460
&:dir(rtl) { margin-left: 6px; }
461
}
462
463
omnibar {
464
&.linked:not(.vertical) entry { border-radius: 2px; }
465
466
&:not(:hover):not(:active) entry { color: $secondary_fg_color; }
467
}
468
469
popover.omnibar list row:not(:last-child) {
470
border-bottom: 1px solid $border_color;
471
}
472
473
entry.preferences-search {
474
@extend %entry.flat;
475
476
box-shadow: inset 0 -1px $border_color;
477
background-color: $base_color;
478
479
// doesn't work properly
480
// &:dir(ltr) { border-right: 1px solid $border_color; }
481
// &:dir(rtl) { border-left: 1px solid $border_color; }
482
}
483
484
preferences stacksidebar.sidebar list {
485
background-color: $lighter_bg_color;
486
}
487
488
preferences stacksidebar.sidebar {
489
&:dir(ltr),
490
&:dir(rtl) { list { border-style: none; }}
491
}
492
493
preferences stacksidebar list separator {
494
min-width: 0;
495
min-height: 0;
496
background: transparent;
497
}
498
499
preferences > box > box {
500
&:dir(ltr) { border-right: 1px solid $border_color; }
501
&:dir(rtl) { border-left: 1px solid $border_color; }
502
}
503
504
popover.messagepopover.background {
505
padding: 0;
506
}
507
508
popover.messagepopover .popover-action-area button {
509
@extend %simple_flat_button;
510
511
padding: 8px 16px;
512
border-top: 1px solid $border_color;
513
border-radius: 0;
514
}
515
516
popover.messagepopover .popover-action-area button:first-child {
517
border-bottom-left-radius: 2px;
518
}
519
520
popover.messagepopover .popover-action-area button:last-child {
521
border-bottom-right-radius: 2px;
522
}
523
524
popover.messagepopover .popover-content-area {
525
margin: 16px;
526
}
527
528
popover.transfers list {
529
background-color: transparent;
530
}
531
532
popover.transfers list row:not(:first-child) {
533
border-top: 1px solid $border_color;
534
}
535
536
popover.transfers list row > box {
537
padding: 10px;
538
}
539
540
dockbin {
541
border: 1px solid $border_color;
542
-PnlDockBin-handle-size: 1;
543
}
544
545
dockpaned {
546
border: 1px solid $border_color;
547
}
548
549
eggsearchbar box.search-bar {
550
padding: 0 8px;
551
border-bottom: 1px solid $border_color;
552
background-color: $bg_color;
553
}
554
555
docktabstrip {
556
padding: 0 8px;
557
border-bottom: 1px solid $border_color;
558
background-color: $bg_color;
559
}
560
561
docktab {
562
transition: $longer_transition,
563
background-size 0,
564
background-image 0;
565
min-height: $small_size;
566
min-width: $small_size;
567
margin-bottom: -1px;
568
padding: $container_padding 6px;
569
570
outline-offset: -6px;
571
572
border-width: 1px; // for reorderable tabs
573
border-color: transparent; //
574
575
background-image: radial-gradient(circle farthest-corner at center,
576
$primary_color 10%,
577
transparent 0%);
578
background-repeat: no-repeat;
579
background-position: center;
580
background-size: 0% 0%;
581
582
color: $secondary_fg_color;
583
font-weight: 500;
584
585
&:hover {
586
box-shadow: inset 0 -2px $fill_color;
587
color: $fg_color;
588
}
589
590
&:checked {
591
transition: $longer_transition,
592
background-size $longer_duration $deceleration_curve,
593
background-image $longer_duration + $ripple_duration $deceleration_curve;
594
box-shadow: inset 0 -2px $primary_color;
595
background-image: radial-gradient(circle farthest-corner at center,
596
transparent 10%,
597
transparent 0%);
598
background-size: 1000% 1000%;
599
color: $fg_color;
600
}
601
}
602
603
dockoverlayedge {
604
background-color: $bg_color;
605
}
606
607
dockoverlayedge docktabstrip {
608
padding: 0;
609
border: none;
610
}
611
612
dockoverlayedge.left-edge docktab {
613
&:hover { box-shadow: inset -2px 0 $fill_color; }
614
&:checked { box-shadow: inset -2px 0 $primary_color; }
615
}
616
617
dockoverlayedge.right-edge docktab {
618
&:hover { box-shadow: inset 2px 0 $fill_color; }
619
&:checked { box-shadow: inset 2px 0 $primary_color; }
620
}
621
622
pillbox {
623
background-color: $bg_color;
624
border-radius: 2px;
625
}
626
627
buildperspective row {
628
// padding: 10px;
629
}
630
631
layoutpane entry.search {
632
@extend %entry.flat;
633
634
box-shadow: inset 0 -1px $border_color;
635
background-color: $base_color;
636
}
637
638
editortweak entry.search {
639
@extend %entry.flat;
640
641
margin-bottom: -1px;
642
box-shadow: none;
643
}
644
645
//
646
// let's tweak hard-coded elements
647
//
648
649
.gb-search-entry-occurrences-tag {
650
box-shadow: none;
651
background-color: transparent;
652
}
653
654
// Keep search bar and layouttab height in sync.
655
docktabstrip {
656
min-height: 39px;
657
}
658
659
layouttabbar > box {
660
// min-height: 39px;
661
}
662
663
eggsearchbar > revealer > box {
664
// min-height: 39px;
665
}
666
667
eggsearchbar entry {
668
// min-height: 24px;
669
}
670
671
workbench preferences preferencesgroup list entry {
672
// background: none;
673
// min-height: 0px;
674
padding-top: 8px;
675
padding-bottom: 8px;
676
}
677
678
button.run-arrow-button {
679
// min-width: 12px;
680
padding-left: ($medium_size - 16px) / 2;
681
padding-right: ($medium_size - 16px) / 2;
682
}
683
684
685
/**********
686
* Photos *
687
**********/
688
// based css:
689
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css
690
691
GdMainIconView.content-view {
692
-GdMainIconView-icon-size: 48;
693
}
694
695
// Make spinner visible on both dark and bright backgrounds w/o making
696
// it look ugly/weird.
697
GdMainIconView.content-view.cell:active {
698
// color: $tertiary_fg_color;
699
}
700
701
.documents-counter {
702
margin: 8px;
703
border-radius: $circular_radius;
704
box-shadow: $shadow_2;
705
background-color: $accent_color;
706
color: $inverse_fg_color;
707
font-weight: bold;
708
}
709
710
.photos-entry-tag {
711
@extend .documents-entry-tag;
712
}
713
714
.documents-scrolledwin.frame {
715
border-style: none;
716
}
717
718
.photos-icon-bg {
719
}
720
721
.photos-fade-in {
722
opacity: 1;
723
transition: opacity $shorter_duration $deceleration_curve;
724
}
725
726
.photos-fade-out {
727
opacity: 0;
728
transition: opacity $shorter_duration $deceleration_curve;
729
}
730
731
.photos-collection-icon {
732
}
733
734
overlay grid.horizontal > revealer > scrolledwindow.frame {
735
&:dir(ltr) { border-style: none none none solid; }
736
&:dir(rtl) { border-style: none solid none none; }
737
}
738
739
740
/*********
741
* Music *
742
*********/
743
// hard-coded css:
744
// https://git.gnome.org/browse/gnome-music/tree/data/application.css
745
746
.side-panel:dir(ltr) {
747
// border-width: 0 1px 0 0;
748
border-style: solid;
749
border-color: $border_color;
750
}
751
752
.side-panel:dir(rtl) {
753
// border-width: 0 0 0 1px;
754
border-style: solid;
755
border-color: $border_color;
756
}
757
758
.side-panel .view {
759
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
760
background-image: image($lighter_bg_color);
761
762
&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
763
}
764
765
.side-panel .view:selected {
766
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
767
background-image: image($primary_color);
768
769
&:hover { background-image: image(mix($inverse_fg_color, $primary_color, percentage(0.05))); }
770
}
771
772
.songs-list {
773
// box-shadow: inset 0 -1px shade(@borders, 1.30);
774
// background-color: @theme_bg_color;
775
776
&:hover { background-image: image($row_fill_color); }
777
}
778
779
frame.documents-dropdown {
780
@extend toolbar.osd;
781
782
margin: 8px;
783
784
> border { border: none; }
785
}
786
787
box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
788
border-bottom: 1px solid $border_color;
789
790
button > widget {
791
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
792
// -GtkArrow-arrow-scaling: 1;
793
}
794
}
795
796
797
/*********
798
* To Do *
799
*********/
800
task-row {
801
transition: $shorter_transition;
802
margin: 0 -4px;
803
804
&:hover { transition: none; }
805
806
label { margin: 0 8px; }
807
808
image { margin: 0 4px; }
809
}
810
811
task-list-view > box > revealer > box > button {
812
min-height: $medium_size;
813
margin: -4px;
814
padding: 0 12px;
815
816
label { margin: 0 8px; }
817
818
image { margin: 0 4px; }
819
}
820
821
822
/*******
823
* eog *
824
*******/
825
#eog-thumb-nav {
826
scrolledwindow { border-top: none; }
827
828
button { -gtk-outline-radius: 2px; }
829
}
830
831
832
/*************
833
* Evolution *
834
*************/
835
frame.taskbar > border { border-style: solid none none; }
836
837
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
838
839
840
/********
841
* gitg *
842
********/
843
frame.commit-frame > border { border-style: solid none none; }
844
845
846
/**************
847
* Characters *
848
**************/
849
box.dialog-vbox scrolledwindow.related { border: 1px solid $border_color; }
850
851
list.categories { background-image: image($lighter_bg_color); }
852
853
854
/**************
855
* Calculator *
856
**************/
857
button.title label { min-height: $medium_size; }
858