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 • 14.63 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
// Make operations button circular
137
.nautilus-window headerbar > revealer > button { @extend %circular_button; }
138
139
// Ensure paned separator rendering. See issue #84 for details.
140
.nautilus-window paned > separator { background-color: $bg_color; }
141
142
143
/*********
144
* gedit *
145
*********/
146
// based css:
147
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
148
// hard-coded css:
149
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css
150
151
// Only normal state is handle
152
.open-document-selector-name-label {
153
font-weight: bold;
154
}
155
156
// Only normal state is handle
157
.open-document-selector-path-label {
158
color: gtkalpha(currentColor, $tertiary_opacity);
159
font-size: smaller;
160
161
// @extend .dim-label;
162
}
163
164
.gedit-document-panel {
165
background-color: $lighter_bg_color;
166
167
// Try to look as the notebook tab close button
168
row button.flat {
169
margin-top: 8px;
170
margin-bottom: 8px;
171
172
@extend %small_button;
173
}
174
}
175
176
.gedit-document-panel-group-row:not(:first-child) {
177
border-top: 1px solid $border_color;
178
}
179
180
.gedit-side-panel-paned statusbar {
181
border-top: 1px solid $border_color;
182
}
183
184
.gedit-search-slider {
185
margin: 4px 4px 8px;
186
187
entry {
188
&:dir(ltr),
189
&:dir(rtl) { // specificity bump
190
border-radius: 2px;
191
192
.gedit-search-entry-occurrences-tag {
193
all: unset;
194
color: gtkalpha(currentColor, $tertiary_opacity);
195
}
196
}
197
198
$buttons_width: $small_size * 2 + $container_padding * 3;
199
200
&:dir(ltr) {
201
margin-right: -$buttons_width;
202
padding-right: $buttons_width;
203
204
.gedit-search-entry-occurrences-tag { margin-left: $container_padding; }
205
206
image.right { margin-right: 0; }
207
}
208
209
&:dir(rtl) {
210
margin-left: -$buttons_width;
211
padding-left: $buttons_width;
212
213
.gedit-search-entry-occurrences-tag { margin-right: $container_padding; }
214
215
image.left { margin-left: 0; }
216
}
217
218
&.error ~ button {
219
color: $secondary_inverse_fg_color;
220
221
&:hover, &:active { color: $inverse_fg_color; }
222
223
&:disabled { color: $disabled_secondary_inverse_fg_color; }
224
}
225
}
226
227
button {
228
border: solid $container_padding transparent;
229
230
@extend %simple_flat_button;
231
232
&:dir(ltr),
233
&:dir(rtl) { @extend %small_button; } // specificity bump
234
235
&:last-child:dir(ltr),
236
&:not(:first-child):dir(rtl) { margin-left: -$container_padding / 2; }
237
238
&:first-child:dir(rtl),
239
&:not(:last-child):dir(ltr) { margin-right: -$container_padding / 2; }
240
}
241
}
242
243
frame.gedit-map-frame > border {
244
&:dir(ltr) { border-style: none none none solid; }
245
&:dir(rtl) { border-style: none solid none none; }
246
}
247
248
249
/**************
250
* Tweak Tool *
251
**************/
252
// hard-coded css:
253
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css
254
255
// the sidebar
256
.tweak-categories {
257
// padding: 4px 0;
258
// background-color: shade(@theme_bg_color, 0.99);
259
background-image: image($lighter_bg_color);
260
261
// hide separators
262
separator {
263
min-width: 0;
264
min-height: 0;
265
background-color: transparent;
266
}
267
}
268
269
.tweak {
270
// padding-top: 3px;
271
padding: 3px;
272
273
&.title:hover { box-shadow: none; }
274
}
275
276
.tweak-group-white,
277
.tweak-white,
278
.tweak-white:hover {
279
// background-color: white;
280
background-image: image($base_color);
281
}
282
283
.tweak-startup,
284
.tweak-startup:hover {
285
// background-color: lighter(shade(@theme_bg_color, 0.9));
286
background-image: image($base_color);
287
}
288
289
.tweak-group-startup {
290
// background-color: @view_separators;
291
background-image: image($base_color);
292
border: 1px solid $border_color;
293
}
294
295
296
/***********
297
* Builder *
298
***********/
299
// based css:
300
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
301
// hard-coded css:
302
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css
303
304
// Titlebar adjustments for workbench
305
//
306
// This is needed due to our placement of headerbar inside of a
307
// stack. We were seeing black edges around the header bar, and
308
// improper radius on the headerbar.
309
//
310
workbench {
311
stack.titlebar {
312
padding: 0;
313
// box-shadow: none;
314
}
315
316
&:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
317
border-radius: 2px 2px 0 0;
318
// box-shadow: none;
319
}
320
}
321
322
perspectiveswitcher {
323
background-color: $bg_color;
324
325
button:checked { color: $primary_color; }
326
}
327
328
// Layout tab and tab bar tweaks
329
// The following makes the layout stack header look similar to a tab bar.
330
layouttabbar {
331
border-bottom: 1px solid $border_color;
332
background-color: $bg_color;
333
334
button { @extend %flat_button; }
335
336
> box > button {
337
margin: (40px - $medium_size) / 2 0;
338
// border-radius: 0;
339
}
340
}
341
342
layouttab {
343
margin: 0 8px; // not working
344
border-style: none solid;
345
border-width: 1px;
346
border-color: $border_color;
347
box-shadow: inset 0 -2px $primary_color;
348
background-color: $base_color;
349
350
separator.vertical { margin: 8px 4px; }
351
352
button {
353
&.text-button, &.image-button, & {
354
margin-top: 8px;
355
margin-bottom: 8px;
356
padding: 0 4px;
357
}
358
}
359
360
// Close button styling for layouttab.
361
// > box > button.close { @extend %circular_button; }
362
}
363
364
layout {
365
border: 1px solid $border_color;
366
-PnlDockBin-handle-size: 1;
367
}
368
369
entry.search-missing {
370
background-color: $error_color;
371
color: $inverse_fg_color;
372
}
373
374
// tweak icons for treeviews
375
workbench treeview.image {
376
color: gtkalpha(currentColor, $tertiary_opacity);
377
378
&:selected { color: $tertiary_inverse_fg_color; }
379
}
380
381
dockbin {
382
border: 1px solid $border_color;
383
-PnlDockBin-handle-size: 1;
384
}
385
386
dockpaned {
387
border: 1px solid $border_color;
388
}
389
390
eggsearchbar box.search-bar {
391
padding: 0 8px;
392
border-bottom: 1px solid $border_color;
393
background-color: $bg_color;
394
}
395
396
docktabstrip {
397
padding: 0 8px;
398
border-bottom: 1px solid $border_color;
399
background-color: $bg_color;
400
}
401
402
docktab {
403
transition: $longer_transition,
404
background-size 0,
405
background-image 0;
406
min-height: $small_size;
407
min-width: $small_size;
408
margin-bottom: -1px;
409
padding: $container_padding 6px;
410
411
outline-offset: -6px;
412
413
border-width: 1px; // for reorderable tabs
414
border-color: transparent; //
415
416
background-image: radial-gradient(circle farthest-corner at center,
417
$primary_color 10%,
418
transparent 0%);
419
background-repeat: no-repeat;
420
background-position: center;
421
background-size: 0% 0%;
422
423
color: $secondary_fg_color;
424
font-weight: 500;
425
426
&:hover {
427
box-shadow: inset 0 -2px $fill_color;
428
color: $fg_color;
429
}
430
431
&:checked {
432
transition: $longer_transition,
433
background-size $longer_duration $deceleration_curve,
434
background-image $longer_duration + $ripple_duration $deceleration_curve;
435
box-shadow: inset 0 -2px $primary_color;
436
background-image: radial-gradient(circle farthest-corner at center,
437
transparent 10%,
438
transparent 0%);
439
background-size: 1000% 1000%;
440
color: $fg_color;
441
}
442
}
443
444
dockoverlayedge {
445
background-color: $bg_color;
446
447
docktabstrip {
448
padding: 0;
449
border: none;
450
}
451
452
&.left-edge docktab {
453
&:hover { box-shadow: inset -2px 0 $fill_color; }
454
&:checked { box-shadow: inset -2px 0 $primary_color; }
455
}
456
457
&.right-edge docktab {
458
&:hover { box-shadow: inset 2px 0 $fill_color; }
459
&:checked { box-shadow: inset 2px 0 $primary_color; }
460
}
461
}
462
463
pillbox {
464
background-color: $bg_color;
465
border-radius: 2px;
466
}
467
468
buildperspective row {
469
padding: 10px;
470
}
471
472
layoutpane entry.search {
473
@extend %entry.flat;
474
475
box-shadow: inset 0 -1px $border_color;
476
background-color: $base_color;
477
}
478
479
editortweak entry.search {
480
@extend %entry.flat;
481
482
margin-bottom: -1px;
483
box-shadow: none;
484
}
485
486
//
487
// let's tweak hard-coded elements
488
//
489
490
// styling for editor search
491
frame.gb-search-frame {
492
// border-bottom-left-radius: 5px;
493
border-bottom-right-radius: 5px;
494
}
495
496
.gb-search-entry-occurrences-tag {
497
box-shadow: none;
498
background-color: transparent;
499
}
500
501
// Keep search bar and layouttab height in sync.
502
// layouttabbar > box,
503
// eggsearchbar > revealer > box,
504
docktabstrip {
505
min-height: 39px;
506
}
507
508
eggsearchbar entry {
509
// min-height: 24px;
510
}
511
512
workbench preferences preferencesgroup list entry {
513
// background: none;
514
// min-height: 0px;
515
padding-top: 8px;
516
padding-bottom: 8px;
517
}
518
519
520
/**********
521
* Photos *
522
**********/
523
// based css:
524
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css
525
526
GdMainIconView.content-view {
527
-GdMainIconView-icon-size: 48;
528
529
// Make spinner visible on both dark and bright backgrounds w/o making
530
// it look ugly/weird.
531
// &.cell:active { color: $tertiary_fg_color; }
532
}
533
534
.documents-counter {
535
margin: 8px;
536
border-radius: $circular_radius;
537
box-shadow: $shadow_2;
538
background-color: $accent_color;
539
color: $inverse_fg_color;
540
font-weight: bold;
541
}
542
543
.photos-entry-tag {
544
@extend .documents-entry-tag;
545
}
546
547
.documents-scrolledwin.frame {
548
border-style: none;
549
}
550
551
.photos-icon-bg {
552
}
553
554
.photos-fade-in {
555
opacity: 1;
556
transition: opacity $shorter_duration $deceleration_curve;
557
}
558
559
.photos-fade-out {
560
opacity: 0;
561
transition: opacity $shorter_duration $deceleration_curve;
562
}
563
564
.photos-collection-icon {
565
}
566
567
overlay grid.horizontal > revealer > scrolledwindow.frame {
568
&:dir(ltr) { border-style: none none none solid; }
569
&:dir(rtl) { border-style: none solid none none; }
570
}
571
572
573
/*********
574
* Music *
575
*********/
576
// hard-coded css:
577
// https://git.gnome.org/browse/gnome-music/tree/data/application.css
578
579
.side-panel:dir(ltr) {
580
// border-width: 0 1px 0 0;
581
border-style: solid;
582
border-color: $border_color;
583
}
584
585
.side-panel:dir(rtl) {
586
// border-width: 0 0 0 1px;
587
border-style: solid;
588
border-color: $border_color;
589
}
590
591
.side-panel .view {
592
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
593
background-image: image($lighter_bg_color);
594
595
&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
596
}
597
598
.side-panel .view:selected {
599
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
600
background-image: image($primary_color);
601
602
&:hover { background-image: image(mix($inverse_fg_color, $primary_color, percentage(0.05))); }
603
}
604
605
.playlists-list {
606
// box-shadow: inset 0 -1px @view_separators;
607
}
608
609
.songs-list {
610
// box-shadow: inset 0 1px shade(@borders, 1.30);
611
// background-color: @theme_bg_color;
612
613
&:hover { background-image: image($row_fill_color); }
614
}
615
616
frame.documents-dropdown {
617
@extend toolbar.osd;
618
619
margin: 8px;
620
621
> border { border: none; }
622
}
623
624
box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
625
border-bottom: 1px solid $border_color;
626
627
button > widget {
628
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
629
// -GtkArrow-arrow-scaling: 1;
630
}
631
}
632
633
634
/*********
635
* To Do *
636
*********/
637
task-row {
638
transition: $shorter_transition;
639
margin: 0 -4px;
640
641
&:hover { transition: none; }
642
643
label { margin: 0 8px; }
644
645
image { margin: 0 4px; }
646
}
647
648
task-list-view > box > revealer > box > button {
649
min-height: $medium_size;
650
margin: -4px;
651
padding: 0 12px;
652
653
label { margin: 0 8px; }
654
655
image { margin: 0 4px; }
656
}
657
658
659
/*******
660
* eog *
661
*******/
662
#eog-thumb-nav {
663
scrolledwindow { border-top: none; }
664
665
button { -gtk-outline-radius: 2px; }
666
}
667
668
669
/*************
670
* Evolution *
671
*************/
672
frame.taskbar > border { border-style: solid none none; }
673
674
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
675
676
677
/********
678
* gitg *
679
********/
680
frame.commit-frame > border { border-style: solid none none; }
681
682
683
/**************
684
* Characters *
685
**************/
686
box.dialog-vbox scrolledwindow.related { border: 1px solid $border_color; }
687
688
list.categories { background-image: image($lighter_bg_color); }
689
690
691
/**************
692
* Calculator *
693
**************/
694
button.title label { min-height: $medium_size; }
695