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 • 17.23 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
* Evolution *
630
*************/
631
frame.taskbar > border { border-style: solid none none; }
632
633
box.vertical > paned.horizontal notebook widget .frame { border-style: none; }
634
635
636
/********
637
* gitg *
638
********/
639
frame.commit-frame > border { border-style: solid none none; }
640
641
642
/************
643
* Terminix *
644
************/
645
.terminix-background box.vertical > widget > box.horizontal {
646
padding: 3px 0 2px;
647
// border-bottom: 1px solid $borders_color;
648
649
button {
650
padding: 4px 8px;
651
652
&.image-button { padding: 4px; }
653
}
654
}
655
656
.terminix-background revealer > frame > border {
657
// border-style: none none solid;
658
border-style: none;
659
}
660
661
button.image-button.session-new-button { min-width: $medium_size - 4px; }
662
663
overlay > revealer.left > scrolledwindow.frame,
664
overlay > revealer.right > scrolledwindow.frame {
665
border-style: none;
666
box-shadow: $z-depth-4;
667
}
668
669
overlay > revealer.left > scrolledwindow.frame {
670
margin-right: 32px;
671
// border-style: none solid none none;
672
}
673
674
overlay > revealer.right > scrolledwindow.frame {
675
margin-left: 32px;
676
// border-style: none none none solid;
677
}
678
679
.terminix-session-sidebar { background-image: image($lighter_bg_color); }
680
681
682
/***********
683
* Firefox *
684
***********/
685
menubar {
686
color: $secondary_inversed_fg_color;
687
688
&:hover { color: $inversed_fg_color; }
689
}
690
691
separator { color: $borders_color; }
692
693
/* FIXME: not working */
694
window.background > widget > check,
695
window.background > widget > radio {
696
margin: 0;
697
padding: 0;
698
}
699
700
window.background > widget > radio:checked {
701
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
702
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
703
border-image: none;
704
}
705
706
707
/***********
708
* Synapse *
709
***********/
710
box > widget > widget:selected { background-color: $primary_color; }
711
712
713
/*********
714
* Unity *
715
*********/
716
// based css:
717
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css
718
719
// Decorations
720
UnityDecoration {
721
-UnityDecoration-extents: 28px 0 0 0;
722
-UnityDecoration-input-extents: 8px;
723
724
-UnityDecoration-shadow-offset-x: 0;
725
-UnityDecoration-shadow-offset-y: 3px;
726
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
727
-UnityDecoration-active-shadow-radius: 18px;
728
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
729
-UnityDecoration-inactive-shadow-radius: 6px;
730
731
-UnityDecoration-glow-size: 8px;
732
-UnityDecoration-glow-color: $primary_color;
733
734
-UnityDecoration-title-indent: 4px;
735
-UnityDecoration-title-fade: 32px;
736
-UnityDecoration-title-alignment: 0.0;
737
}
738
739
UnityDecoration.top {
740
padding: 0 2px;
741
border-style: none;
742
border-radius: 2px 2px 0 0;
743
// box-shadow: inset 0 1px $secondary_highlight_color;
744
box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1);
745
background-color: $secondary_titlebar_color;
746
color: $inversed_fg_color;
747
}
748
749
UnityDecoration.top:backdrop {
750
color: $secondary_inversed_fg_color;
751
}
752
753
UnityDecoration.left,
754
UnityDecoration.right {
755
}
756
757
UnityDecoration.bottom {
758
}
759
760
UnityDecoration.menuitem,
761
UnityDecoration .menuitem {
762
color: gtkalpha(currentColor, $enabled_opacity);
763
}
764
765
UnityDecoration.menubar.menuitem:hover,
766
UnityDecoration.menubar .menuitem *:hover {
767
box-shadow: inset 0 -2px currentColor;
768
background-color: transparent;
769
color: currentColor;
770
}
771
772
.background:not(.csd) headerbar:not(.titlebar) {
773
border-radius: 0;
774
box-shadow: none;
775
776
&.inline-toolbar { border-style: none; }
777
}
778
779
SheetStyleDialog.unity-force-quit {
780
// background-color: $bg_color;
781
}
782
783
// Panel Style
784
UnityPanelWidget,
785
.unity-panel {
786
background-color: $topbar_color;
787
background-image: image($topbar_color);
788
color: $inversed_fg_color;
789
}
790
791
UnityPanelWidget:backdrop,
792
.unity-panel:backdrop {
793
color: $secondary_inversed_fg_color;
794
}
795
796
.unity-panel.menubar,
797
.unity-panel .menubar {
798
}
799
800
.unity-panel.menuitem,
801
.unity-panel .menuitem {
802
color: gtkalpha(currentColor, $enabled_opacity);
803
}
804
805
.unity-panel.menubar.menuitem:hover,
806
.unity-panel.menubar .menuitem *:hover {
807
box-shadow: inset 0 -2px currentColor;
808
background-color: transparent;
809
color: currentColor;
810
}
811
812
@keyframes playbackmenuitem_spinner {
813
to { -gtk-icon-transform: rotate(1turn); }
814
}
815
816
.menu IdoPlaybackMenuItem.menuitem:active {
817
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
818
animation: playbackmenuitem_spinner 1s infinite linear;
819
color: $primary_color;
820
}
821
822