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 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
.gedit-search-entry-occurrences-tag {
200
all: unset;
201
padding: 0 4px;
202
color: gtkalpha(currentColor, $hint_opacity);
203
}
204
205
entry {
206
&:dir(ltr) {
207
margin-right: -$medium_size * 2;
208
padding-right: $medium_size * 2 + 8px;
209
210
.gedit-search-entry-occurrences-tag { margin-right: -8px; }
211
}
212
213
&:dir(rtl) {
214
margin-left: -$medium_size * 2;
215
padding-left: $medium_size * 2 + 8px;
216
217
.gedit-search-entry-occurrences-tag { margin-left: -8px; }
218
}
219
220
&.error ~ button {
221
color: $secondary_inversed_fg_color;
222
223
&:hover, &:active { color: $inversed_fg_color; }
224
225
&:disabled { color: $disabled_secondary_inversed_fg_color; }
226
}
227
}
228
229
button {
230
@extend %simple_flat_button;
231
232
&:dir(ltr),
233
&:dir(rtl) { @extend %linked; }
234
}
235
}
236
237
// Yeah this is ugly
238
.gedit-search-slider .linked:not(.vertical) > entry,
239
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
240
border-radius: 2px;
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: transparent;
266
}
267
}
268
269
.tweak {
270
padding: 3px;
271
// padding-top: 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 $borders_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 stack.titlebar {
311
padding: 0;
312
// box-shadow: none;
313
}
314
315
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
316
border-radius: 2px 2px 0 0;
317
// box-shadow: none;
318
}
319
320
perspectiveswitcher {
321
background-color: $bg_color;
322
}
323
324
perspectiveswitcher button:checked {
325
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 $borders_color;
332
background-color: $bg_color;
333
}
334
335
layouttabbar button { @extend %flat_button; }
336
337
layouttabbar > box > button {
338
margin: (40px - $medium_size) / 2 0;
339
// border-radius: 0;
340
}
341
342
layouttab {
343
margin: 0 8px; // not working
344
border-style: none solid;
345
border-width: 1px;
346
border-color: $borders_color;
347
box-shadow: inset 0 -2px $primary_color;
348
background-color: $base_color;
349
}
350
351
layouttab separator.vertical {
352
margin: 8px 4px;
353
}
354
355
layouttab button {
356
&.text-button, &.image-button, & {
357
margin-top: 8px;
358
margin-bottom: 8px;
359
padding: 0 4px;
360
}
361
}
362
363
// Close button styling for layouttab.
364
layouttab > box > button.close {
365
border-radius: $circular_radius;
366
}
367
368
layout {
369
border: 1px solid $borders_color;
370
-PnlDockBin-handle-size: 1;
371
}
372
373
entry.search-missing {
374
background-color: $error_color;
375
color: $inversed_fg_color;
376
}
377
378
// tweak icons for treeviews
379
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
380
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }
381
382
dockbin {
383
border: 1px solid $borders_color;
384
-PnlDockBin-handle-size: 1;
385
}
386
387
dockpaned {
388
border: 1px solid $borders_color;
389
}
390
391
eggsearchbar box.search-bar {
392
padding: 0 8px;
393
border-bottom: 1px solid $borders_color;
394
background-color: $bg_color;
395
}
396
397
docktabstrip {
398
padding: 0 8px;
399
border-bottom: 1px solid $borders_color;
400
background-color: $bg_color;
401
}
402
403
docktab {
404
transition: $longer_transition;
405
min-height: $small_size;
406
min-width: $small_size;
407
margin-bottom: -1px;
408
padding: $container_padding 6px;
409
410
outline-offset: -6px;
411
412
border-width: 1px; // for reorderable tabs
413
border-color: transparent; //
414
415
color: $secondary_fg_color;
416
font-weight: 500;
417
418
&:hover {
419
box-shadow: inset 0 -2px $track_color;
420
color: $fg_color;
421
}
422
423
&:checked {
424
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
425
box-shadow: inset 0 -2px $primary_color;
426
color: $fg_color;
427
}
428
}
429
430
dockoverlayedge {
431
background-color: $bg_color;
432
}
433
434
dockoverlayedge docktabstrip {
435
padding: 0;
436
border: none;
437
}
438
439
dockoverlayedge.left-edge docktab {
440
&:hover { box-shadow: inset -2px 0 $track_color; }
441
&:checked { box-shadow: inset -2px 0 $primary_color; }
442
}
443
444
dockoverlayedge.right-edge docktab {
445
&:hover { box-shadow: inset 2px 0 $track_color; }
446
&:checked { box-shadow: inset 2px 0 $primary_color; }
447
}
448
449
pillbox {
450
background-color: $bg_color;
451
border-radius: 2px;
452
}
453
454
buildperspective row {
455
padding: 10px;
456
}
457
458
layoutpane entry.search {
459
@extend %entry.flat;
460
461
box-shadow: inset 0 -1px $borders_color;
462
background-color: $base_color;
463
}
464
465
editortweak entry.search {
466
@extend %entry.flat;
467
468
margin-bottom: -1px;
469
box-shadow: none;
470
}
471
472
//
473
// let's tweak hard-coded elements
474
//
475
476
// styling for editor search
477
frame.gb-search-frame {
478
// border-bottom-left-radius: 5px;
479
border-bottom-right-radius: 5px;
480
}
481
482
.gb-search-entry-occurrences-tag {
483
box-shadow: none;
484
background-color: transparent;
485
}
486
487
// Keep search bar and layouttab height in sync.
488
docktabstrip {
489
min-height: 39px;
490
}
491
492
layouttabbar > box {
493
// min-height: 39px;
494
}
495
496
eggsearchbar > revealer > box {
497
// min-height: 39px;
498
}
499
500
eggsearchbar entry {
501
// min-height: 24px;
502
}
503
504
workbench preferences preferencesgroup list entry {
505
// background: none;
506
// min-height: 0px;
507
padding-top: 8px;
508
padding-bottom: 8px;
509
}
510
511
512
/**********
513
* Photos *
514
**********/
515
// based css:
516
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css
517
518
GdMainIconView.content-view {
519
-GdMainIconView-icon-size: 48;
520
}
521
522
// Make spinner visible on both dark and bright backgrounds w/o making
523
// it look ugly/weird.
524
GdMainIconView.content-view.cell:active {
525
// color: $tertiary_fg_color;
526
}
527
528
.documents-counter {
529
margin: 8px;
530
border-radius: $circular_radius;
531
box-shadow: $z-depth-2;
532
background-color: $accent_color;
533
color: $inversed_fg_color;
534
font-weight: bold;
535
}
536
537
.photos-entry-tag {
538
@extend .documents-entry-tag;
539
}
540
541
.documents-scrolledwin.frame {
542
border-style: none;
543
}
544
545
.photos-icon-bg {
546
}
547
548
.photos-fade-in {
549
opacity: 1;
550
transition: opacity $shorter_duration $deceleration_curve;
551
}
552
553
.photos-fade-out {
554
opacity: 0;
555
transition: opacity $shorter_duration $deceleration_curve;
556
}
557
558
.photos-collection-icon {
559
}
560
561
overlay grid.horizontal > revealer > scrolledwindow.frame {
562
&:dir(ltr) { border-style: none none none solid; }
563
&:dir(rtl) { border-style: none solid none none; }
564
}
565
566
567
/*********
568
* Music *
569
*********/
570
// hard-coded css:
571
// https://git.gnome.org/browse/gnome-music/tree/data/application.css
572
573
.side-panel:dir(ltr) {
574
// border-width: 0 1px 0 0;
575
border-style: solid;
576
border-color: $borders_color;
577
}
578
579
.side-panel:dir(rtl) {
580
// border-width: 0 0 0 1px;
581
border-style: solid;
582
border-color: $borders_color;
583
}
584
585
.side-panel .view {
586
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
587
background-image: image($lighter_bg_color);
588
589
&:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
590
}
591
592
.side-panel .view:selected {
593
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
594
background-image: image($primary_color);
595
596
&:hover { background-image: image(mix($inversed_fg_color, $primary_color, percentage(0.05))); }
597
}
598
599
.playlists-list {
600
// box-shadow: inset 0 -1px @view_separators;
601
}
602
603
.songs-list {
604
// box-shadow: inset 0 1px shade(@borders, 1.30);
605
// background-color: @theme_bg_color;
606
607
&:hover { background-image: image(gtkalpha(currentColor, 0.05)); }
608
}
609
610
frame.documents-dropdown {
611
@extend toolbar.osd;
612
613
margin: 8px;
614
615
> border { border: none; }
616
}
617
618
box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
619
border-bottom: 1px solid $borders_color;
620
621
button > widget {
622
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
623
// -GtkArrow-arrow-scaling: 1;
624
}
625
}
626
627
628
/*********
629
* To Do *
630
*********/
631
task-row {
632
transition: $shorter_transition;
633
634
&:hover { transition: none; }
635
}
636
637
task-list-view > box > revealer > box > button { margin: -6px 0; }
638
639
640
/*************
641
* Evolution *
642
*************/
643
frame.taskbar > border { border-style: solid none none; }
644
645
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
646
647
648
/********
649
* gitg *
650
********/
651
frame.commit-frame > border { border-style: solid none none; }
652
653
654
/**************
655
* Characters *
656
**************/
657
box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; }
658
659
list.categories { background-image: image($lighter_bg_color); }
660
661
662
/**************
663
* Calculator *
664
**************/
665
button.title label { min-height: $medium_size; }
666
667
668
/************
669
* Terminix *
670
************/
671
.terminix-background box.vertical > widget > box.horizontal {
672
padding: 3px 0 2px;
673
// border-bottom: 1px solid $borders_color;
674
675
button {
676
padding: 4px 8px;
677
678
&.image-button { padding: 4px; }
679
}
680
}
681
682
.terminix-background revealer > frame > border {
683
// border-style: none none solid;
684
border-style: none;
685
}
686
687
button.image-button.session-new-button { min-width: $medium_size - 4px; }
688
689
overlay > revealer.left > scrolledwindow.frame,
690
overlay > revealer.right > scrolledwindow.frame {
691
border-style: none;
692
box-shadow: $z-depth-4;
693
}
694
695
overlay > revealer.left > scrolledwindow.frame {
696
margin-right: 32px;
697
// border-style: none solid none none;
698
}
699
700
overlay > revealer.right > scrolledwindow.frame {
701
margin-left: 32px;
702
// border-style: none none none solid;
703
}
704
705
.terminix-session-sidebar { background-image: image($lighter_bg_color); }
706
707
708
/***********
709
* Firefox *
710
***********/
711
window.background > widget > menubar {
712
color: $secondary_inversed_fg_color;
713
714
&:hover { color: $inversed_fg_color; }
715
716
&:disabled { color: $disabled_secondary_inversed_fg_color; }
717
}
718
719
window.background > menu > menuitem > label:disabled { color: $disabled_fg_color; }
720
721
window.background > window.background > menu > separator { color: $borders_color; }
722
723
window.background > widget > frame { color: rgba(0, 0, 0, 0.2); }
724
725
window.background > widget > checkbutton > check,
726
window.background > widget > radiobutton > radio {
727
margin: 0;
728
padding: 0;
729
}
730
731
window.background > widget > radiobutton > radio:checked {
732
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
733
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
734
border-image: none;
735
}
736
737
738
/***********
739
* Synapse *
740
***********/
741
box > widget > widget:selected { background-color: $primary_color; }
742
743
744
/*********
745
* Unity *
746
*********/
747
// based css:
748
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css
749
750
// Decorations
751
UnityDecoration {
752
-UnityDecoration-extents: 28px 0 0 0;
753
-UnityDecoration-input-extents: 8px;
754
755
-UnityDecoration-shadow-offset-x: 0;
756
-UnityDecoration-shadow-offset-y: 3px;
757
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
758
-UnityDecoration-active-shadow-radius: 18px;
759
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
760
-UnityDecoration-inactive-shadow-radius: 6px;
761
762
-UnityDecoration-glow-size: 8px;
763
-UnityDecoration-glow-color: $primary_color;
764
765
-UnityDecoration-title-indent: 4px;
766
-UnityDecoration-title-fade: 32px;
767
-UnityDecoration-title-alignment: 0.0;
768
}
769
770
UnityDecoration.top {
771
padding: 0 2px;
772
border-style: none;
773
border-radius: 2px 2px 0 0;
774
// box-shadow: inset 0 1px $secondary_highlight_color;
775
box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1);
776
background-color: $secondary_titlebar_color;
777
color: $inversed_fg_color;
778
}
779
780
UnityDecoration.top:backdrop {
781
color: $secondary_inversed_fg_color;
782
}
783
784
UnityDecoration.left,
785
UnityDecoration.right {
786
}
787
788
UnityDecoration.bottom {
789
}
790
791
UnityDecoration.menuitem,
792
UnityDecoration .menuitem {
793
color: gtkalpha(currentColor, $enabled_opacity);
794
}
795
796
UnityDecoration.menubar.menuitem:hover,
797
UnityDecoration.menubar .menuitem *:hover {
798
box-shadow: inset 0 -2px currentColor;
799
background-color: transparent;
800
color: currentColor;
801
}
802
803
.background:not(.csd) headerbar:not(.titlebar) {
804
border-radius: 0;
805
box-shadow: none;
806
807
&.inline-toolbar { border-style: none; }
808
}
809
810
SheetStyleDialog.unity-force-quit {
811
// background-color: $bg_color;
812
}
813
814
// Panel Style
815
UnityPanelWidget,
816
.unity-panel {
817
background-color: $topbar_color;
818
background-image: image($topbar_color);
819
color: $inversed_fg_color;
820
}
821
822
UnityPanelWidget:backdrop,
823
.unity-panel:backdrop {
824
color: $secondary_inversed_fg_color;
825
}
826
827
.unity-panel.menubar,
828
.unity-panel .menubar {
829
}
830
831
.unity-panel.menuitem,
832
.unity-panel .menuitem {
833
color: gtkalpha(currentColor, $enabled_opacity);
834
}
835
836
.unity-panel.menubar.menuitem:hover,
837
.unity-panel.menubar .menuitem *:hover {
838
box-shadow: inset 0 -2px currentColor;
839
background-color: transparent;
840
color: currentColor;
841
}
842
843
@keyframes playbackmenuitem_spinner {
844
to { -gtk-icon-transform: rotate(1turn); }
845
}
846
847
.menu IdoPlaybackMenuItem.menuitem:active {
848
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
849
animation: playbackmenuitem_spinner 1s infinite linear;
850
color: $primary_color;
851
}
852
853