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.47 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
margin: 0 -4px;
646
647
&:hover { transition: none; }
648
649
label { margin: 0 8px; }
650
651
image { margin: 0 4px; }
652
}
653
654
task-list-view > box > revealer > box > button {
655
min-height: $medium_size;
656
margin: -4px;
657
padding: 0 12px;
658
659
label { margin: 0 8px; }
660
661
image { margin: 0 4px; }
662
}
663
664
665
/*************
666
* Evolution *
667
*************/
668
frame.taskbar > border { border-style: solid none none; }
669
670
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
671
672
673
/********
674
* gitg *
675
********/
676
frame.commit-frame > border { border-style: solid none none; }
677
678
679
/**************
680
* Characters *
681
**************/
682
box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; }
683
684
list.categories { background-image: image($lighter_bg_color); }
685
686
687
/**************
688
* Calculator *
689
**************/
690
button.title label { min-height: $medium_size; }
691
692
693
/************
694
* Terminix *
695
************/
696
.terminix-background box.vertical > widget > box.horizontal {
697
padding: 3px 0 2px;
698
// border-bottom: 1px solid $borders_color;
699
700
button {
701
padding: 4px 8px;
702
703
&.image-button { padding: 4px; }
704
}
705
}
706
707
.terminix-background revealer > frame > border {
708
// border-style: none none solid;
709
border-style: none;
710
}
711
712
button.image-button.session-new-button { min-width: $medium_size - 4px; }
713
714
overlay > revealer.left > scrolledwindow.frame,
715
overlay > revealer.right > scrolledwindow.frame {
716
border-style: none;
717
box-shadow: $z-depth-4;
718
}
719
720
overlay > revealer.left > scrolledwindow.frame {
721
margin-right: 32px;
722
// border-style: none solid none none;
723
}
724
725
overlay > revealer.right > scrolledwindow.frame {
726
margin-left: 32px;
727
// border-style: none none none solid;
728
}
729
730
.terminix-session-sidebar { background-image: image($lighter_bg_color); }
731
732
733
/***********
734
* Firefox *
735
***********/
736
window.background > widget > menubar {
737
color: $secondary_inversed_fg_color;
738
739
&:hover { color: $inversed_fg_color; }
740
741
&:disabled { color: $disabled_secondary_inversed_fg_color; }
742
}
743
744
window.background > menu > menuitem > label:disabled { color: $disabled_fg_color; }
745
746
window.background > window.background > menu > separator { color: $borders_color; }
747
748
window.background > widget > frame { color: rgba(0, 0, 0, 0.2); }
749
750
window.background > widget > checkbutton > check,
751
window.background > widget > radiobutton > radio {
752
margin: 0;
753
padding: 0;
754
}
755
756
window.background > widget > radiobutton > radio:checked {
757
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
758
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
759
border-image: none;
760
}
761
762
763
/***********
764
* Synapse *
765
***********/
766
box > widget > widget:selected { background-color: $primary_color; }
767
768
769
/*********
770
* Unity *
771
*********/
772
// based css:
773
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css
774
775
// Decorations
776
UnityDecoration {
777
-UnityDecoration-extents: 28px 0 0 0;
778
-UnityDecoration-input-extents: 8px;
779
780
-UnityDecoration-shadow-offset-x: 0;
781
-UnityDecoration-shadow-offset-y: 3px;
782
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
783
-UnityDecoration-active-shadow-radius: 18px;
784
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
785
-UnityDecoration-inactive-shadow-radius: 6px;
786
787
-UnityDecoration-glow-size: 8px;
788
-UnityDecoration-glow-color: $primary_color;
789
790
-UnityDecoration-title-indent: 4px;
791
-UnityDecoration-title-fade: 32px;
792
-UnityDecoration-title-alignment: 0.0;
793
}
794
795
UnityDecoration.top {
796
padding: 0 2px;
797
border-style: none;
798
border-radius: 2px 2px 0 0;
799
// box-shadow: inset 0 1px $secondary_highlight_color;
800
box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1);
801
background-color: $secondary_titlebar_color;
802
color: $inversed_fg_color;
803
}
804
805
UnityDecoration.top:backdrop {
806
color: $secondary_inversed_fg_color;
807
}
808
809
UnityDecoration.left,
810
UnityDecoration.right {
811
}
812
813
UnityDecoration.bottom {
814
}
815
816
UnityDecoration.menuitem,
817
UnityDecoration .menuitem {
818
color: gtkalpha(currentColor, $enabled_opacity);
819
}
820
821
UnityDecoration.menubar.menuitem:hover,
822
UnityDecoration.menubar .menuitem *:hover {
823
box-shadow: inset 0 -2px currentColor;
824
background-color: transparent;
825
color: currentColor;
826
}
827
828
.background:not(.csd) headerbar:not(.titlebar) {
829
border-radius: 0;
830
box-shadow: none;
831
832
&.inline-toolbar { border-style: none; }
833
}
834
835
SheetStyleDialog.unity-force-quit {
836
// background-color: $bg_color;
837
}
838
839
// Panel Style
840
UnityPanelWidget,
841
.unity-panel {
842
background-color: $topbar_color;
843
background-image: image($topbar_color);
844
color: $inversed_fg_color;
845
}
846
847
UnityPanelWidget:backdrop,
848
.unity-panel:backdrop {
849
color: $secondary_inversed_fg_color;
850
}
851
852
.unity-panel.menubar,
853
.unity-panel .menubar {
854
}
855
856
.unity-panel.menuitem,
857
.unity-panel .menuitem {
858
color: gtkalpha(currentColor, $enabled_opacity);
859
}
860
861
.unity-panel.menubar.menuitem:hover,
862
.unity-panel.menubar .menuitem *:hover {
863
box-shadow: inset 0 -2px currentColor;
864
background-color: transparent;
865
color: currentColor;
866
}
867
868
@keyframes playbackmenuitem_spinner {
869
to { -gtk-icon-transform: rotate(1turn); }
870
}
871
872
.menu IdoPlaybackMenuItem.menuitem:active {
873
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
874
animation: playbackmenuitem_spinner 1s infinite linear;
875
color: $primary_color;
876
}
877
878