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