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 • 18.07 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
// Titlebar adjustments for workbench
381
//
382
// This is needed due to our placement of headerbar inside of a
383
// stack. We were seeing black edges around the header bar, and
384
// improper radius on the headerbar.
385
//
386
window.workbench stack.titlebar {
387
padding: 0;
388
// box-shadow: none;
389
}
390
391
window.workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
392
border-radius: 2px 2px 0 0;
393
// box-shadow: none;
394
}
395
396
// Layout tab and tab bar tweaks
397
// The following makes the layout stack header look similar to a tab bar.
398
layouttabbar {
399
border-bottom: 1px solid $border_color;
400
background-color: $bg_color;
401
}
402
403
layouttabbar button { @extend %flat_button; }
404
405
layouttabbar > box > button {
406
margin: (40px - $medium_size) / 2 0;
407
// border-radius: 0;
408
}
409
410
layouttab {
411
margin: 0 8px; // not working
412
border-style: none solid;
413
border-width: 1px;
414
border-color: $border_color;
415
box-shadow: inset 0 -2px $primary_color;
416
background-color: $base_color;
417
}
418
419
layouttab separator.vertical {
420
margin: 8px 4px;
421
}
422
423
layouttab button {
424
&.text-button, &.image-button, & {
425
margin-top: 8px;
426
margin-bottom: 8px;
427
padding: 0 4px;
428
}
429
}
430
431
// Close button styling for layouttab.
432
layouttab > box > button.close {
433
border-radius: $circular_radius;
434
}
435
436
layout {
437
border: 1px solid $border_color;
438
-PnlDockBin-handle-size: 1;
439
}
440
441
entry.search-missing {
442
background-color: $error_color;
443
color: $inverse_fg_color;
444
}
445
446
// tweak icons for treeviews
447
window.workbench treeview.image { color: gtkalpha(currentColor, $tertiary_opacity); }
448
449
window.workbench treeview.image:selected { color: $tertiary_inverse_fg_color; }
450
451
popover.popover-selector list {
452
padding: 8px - 2px;
453
}
454
455
popover.popover-selector list row {
456
border-radius: 2px;
457
}
458
459
popover.popover-selector list row image {
460
&:dir(ltr) { margin-right: 6px; }
461
&:dir(rtl) { margin-left: 6px; }
462
}
463
464
popover.popover-selector list row .accel {
465
&:dir(ltr) { margin-left: 6px; }
466
&:dir(rtl) { margin-right: 6px; }
467
}
468
469
omnibar {
470
&.linked:not(.vertical) entry { border-radius: 2px; }
471
472
&:not(:hover):not(:active) entry { color: $secondary_fg_color; }
473
}
474
475
popover.omnibar list row:not(:last-child) {
476
border-bottom: 1px solid $border_color;
477
}
478
479
entry.preferences-search {
480
@extend %entry.flat;
481
482
box-shadow: inset 0 -1px $border_color;
483
background-color: $base_color;
484
485
// doesn't work properly
486
// &:dir(ltr) { border-right: 1px solid $border_color; }
487
// &:dir(rtl) { border-left: 1px solid $border_color; }
488
}
489
490
preferences stacksidebar.sidebar list {
491
background-color: $lighter_bg_color;
492
}
493
494
preferences stacksidebar.sidebar {
495
&:dir(ltr),
496
&:dir(rtl) { list { border-style: none; }}
497
}
498
499
preferences stacksidebar list separator {
500
min-width: 0;
501
min-height: 0;
502
background: transparent;
503
}
504
505
preferences > box > box {
506
&:dir(ltr) { border-right: 1px solid $border_color; }
507
&:dir(rtl) { border-left: 1px solid $border_color; }
508
}
509
510
popover.messagepopover.background {
511
padding: 0;
512
}
513
514
popover.messagepopover .popover-action-area button {
515
@extend %simple_flat_button;
516
517
padding: 8px 16px;
518
border-top: 1px solid $border_color;
519
border-radius: 0;
520
}
521
522
popover.messagepopover .popover-action-area button:first-child {
523
border-bottom-left-radius: 2px;
524
}
525
526
popover.messagepopover .popover-action-area button:last-child {
527
border-bottom-right-radius: 2px;
528
}
529
530
popover.messagepopover .popover-content-area {
531
margin: 16px;
532
}
533
534
popover.transfers list {
535
background-color: transparent;
536
}
537
538
popover.transfers list row:not(:first-child) {
539
border-top: 1px solid $border_color;
540
}
541
542
popover.transfers list row > box {
543
padding: 10px;
544
}
545
546
dockbin {
547
border: 1px solid $border_color;
548
-PnlDockBin-handle-size: 1;
549
}
550
551
dockpaned {
552
border: 1px solid $border_color;
553
}
554
555
eggsearchbar box.search-bar {
556
padding: 0 8px;
557
border-bottom: 1px solid $border_color;
558
background-color: $bg_color;
559
}
560
561
docktabstrip {
562
padding: 0 8px;
563
border-bottom: 1px solid $border_color;
564
background-color: $bg_color;
565
}
566
567
docktab {
568
transition: $longer_transition,
569
background-size 0,
570
background-image 0;
571
min-height: $small_size;
572
min-width: $small_size;
573
margin-bottom: -1px;
574
padding: $container_padding 6px;
575
576
outline-offset: -6px;
577
578
border-width: 1px; // for reorderable tabs
579
border-color: transparent; //
580
581
background-image: radial-gradient(circle farthest-corner at center,
582
$primary_color 10%,
583
transparent 0%);
584
background-repeat: no-repeat;
585
background-position: center;
586
background-size: 0% 0%;
587
588
color: $secondary_fg_color;
589
font-weight: 500;
590
591
&:hover {
592
box-shadow: inset 0 -2px $fill_color;
593
color: $fg_color;
594
}
595
596
&:checked {
597
transition: $longer_transition,
598
background-size $longer_duration $deceleration_curve,
599
background-image $longer_duration + $ripple_duration $deceleration_curve;
600
box-shadow: inset 0 -2px $primary_color;
601
background-image: radial-gradient(circle farthest-corner at center,
602
transparent 10%,
603
transparent 0%);
604
background-size: 1000% 1000%;
605
color: $fg_color;
606
}
607
}
608
609
dockoverlayedge {
610
background-color: $bg_color;
611
}
612
613
dockoverlayedge docktabstrip {
614
padding: 0;
615
border: none;
616
}
617
618
dockoverlayedge.left-edge docktab {
619
&:hover { box-shadow: inset -2px 0 $fill_color; }
620
&:checked { box-shadow: inset -2px 0 $primary_color; }
621
}
622
623
dockoverlayedge.right-edge docktab {
624
&:hover { box-shadow: inset 2px 0 $fill_color; }
625
&:checked { box-shadow: inset 2px 0 $primary_color; }
626
}
627
628
pillbox {
629
background-color: $bg_color;
630
border-radius: 2px;
631
}
632
633
buildperspective row {
634
// padding: 10px;
635
}
636
637
layoutpane entry.search {
638
@extend %entry.flat;
639
640
box-shadow: inset 0 -1px $border_color;
641
background-color: $base_color;
642
}
643
644
editortweak entry.search {
645
@extend %entry.flat;
646
647
margin-bottom: -1px;
648
box-shadow: none;
649
}
650
651
//
652
// let's tweak hard-coded elements
653
//
654
655
.gb-search-entry-occurrences-tag {
656
box-shadow: none;
657
background-color: transparent;
658
}
659
660
// Keep search bar and layouttab height in sync.
661
docktabstrip {
662
min-height: 39px;
663
}
664
665
layouttabbar > box {
666
// min-height: 39px;
667
}
668
669
eggsearchbar > revealer > box {
670
// min-height: 39px;
671
}
672
673
eggsearchbar entry {
674
// min-height: 24px;
675
}
676
677
window.workbench preferences preferencesgroup list entry {
678
// background: none;
679
// min-height: 0px;
680
padding-top: 8px;
681
padding-bottom: 8px;
682
}
683
684
button.run-arrow-button {
685
// min-width: 12px;
686
padding-left: ($medium_size - 16px) / 2;
687
padding-right: ($medium_size - 16px) / 2;
688
}
689
690
691
/**********
692
* Photos *
693
**********/
694
// based css:
695
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css
696
697
GdMainIconView.content-view {
698
-GdMainIconView-icon-size: 48;
699
}
700
701
// Make spinner visible on both dark and bright backgrounds w/o making
702
// it look ugly/weird.
703
GdMainIconView.content-view.cell:active {
704
// color: $tertiary_fg_color;
705
}
706
707
.documents-counter {
708
margin: 8px;
709
border-radius: $circular_radius;
710
box-shadow: $shadow_2;
711
background-color: $accent_color;
712
color: $inverse_fg_color;
713
font-weight: bold;
714
}
715
716
.photos-entry-tag {
717
@extend .documents-entry-tag;
718
}
719
720
.documents-scrolledwin.frame {
721
border-style: none;
722
}
723
724
.photos-icon-bg {
725
}
726
727
.photos-fade-in {
728
opacity: 1;
729
transition: opacity $shorter_duration $deceleration_curve;
730
}
731
732
.photos-fade-out {
733
opacity: 0;
734
transition: opacity $shorter_duration $deceleration_curve;
735
}
736
737
.photos-collection-icon {
738
}
739
740
overlay grid.horizontal > revealer > scrolledwindow.frame {
741
&:dir(ltr) { border-style: none none none solid; }
742
&:dir(rtl) { border-style: none solid none none; }
743
}
744
745
746
/*********
747
* Music *
748
*********/
749
// hard-coded css:
750
// https://git.gnome.org/browse/gnome-music/tree/data/application.css
751
752
.side-panel:dir(ltr) {
753
// border-width: 0 1px 0 0;
754
border-style: solid;
755
border-color: $border_color;
756
}
757
758
.side-panel:dir(rtl) {
759
// border-width: 0 0 0 1px;
760
border-style: solid;
761
border-color: $border_color;
762
}
763
764
.side-panel .view {
765
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
766
background-image: image($lighter_bg_color);
767
768
&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
769
}
770
771
.side-panel .view:selected {
772
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
773
background-image: image($primary_color);
774
775
&:hover { background-image: image(mix($inverse_fg_color, $primary_color, percentage(0.05))); }
776
}
777
778
.songs-list {
779
// box-shadow: inset 0 -1px shade(@borders, 1.30);
780
// background-color: @theme_bg_color;
781
782
&:hover { background-image: image($row_fill_color); }
783
}
784
785
frame.documents-dropdown {
786
@extend toolbar.osd;
787
788
margin: 8px;
789
790
> border { border: none; }
791
}
792
793
box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
794
border-bottom: 1px solid $border_color;
795
796
button > widget {
797
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
798
// -GtkArrow-arrow-scaling: 1;
799
}
800
}
801
802
803
/*********
804
* To Do *
805
*********/
806
task-row {
807
transition: $shorter_transition;
808
margin: 0 -4px;
809
810
&:hover { transition: none; }
811
812
label { margin: 0 8px; }
813
814
image { margin: 0 4px; }
815
}
816
817
task-list-view > box > revealer > box > button {
818
min-height: $medium_size;
819
margin: -4px;
820
padding: 0 12px;
821
822
label { margin: 0 8px; }
823
824
image { margin: 0 4px; }
825
}
826
827
828
/*******
829
* eog *
830
*******/
831
#eog-thumb-nav {
832
scrolledwindow { border-top: none; }
833
834
button { -gtk-outline-radius: 2px; }
835
}
836
837
838
/*************
839
* Evolution *
840
*************/
841
frame.taskbar > border { border-style: solid none none; }
842
843
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
844
845
846
/********
847
* gitg *
848
********/
849
frame.commit-frame > border { border-style: solid none none; }
850
851
852
/**************
853
* Characters *
854
**************/
855
box.dialog-vbox scrolledwindow.related { border: 1px solid $border_color; }
856
857
list.categories { background-image: image($lighter_bg_color); }
858
859
860
/**************
861
* Calculator *
862
**************/
863
button.title label { min-height: $medium_size; }
864