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