A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _apps.scss

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