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