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