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