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

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