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