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