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