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