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-3.22.scss

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