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