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