A fork of the Materia GTK theme.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 _gnome.scss

View raw Download
text/plain • 25.88 kiB
ASCII text
        
            
1
@use "sass:color";
2
@use "sass:math";
3
@use "../../../theme";
4
@use "../../../theme-color";
5
@use "../common";
6
@use "../drawing";
7
8
/**
9
* Nautilus
10
*/
11
12
// based css:
13
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css
14
// hard-coded css:
15
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/nautilus.css
16
17
.nautilus-window,
18
.nautilus-window notebook,
19
.nautilus-window notebook > stack {
20
// background-color: $surface-z0;
21
}
22
23
.nautilus-canvas-item {
24
// border-radius: $corner-radius;
25
}
26
27
.nautilus-canvas-item.dim-label,
28
.nautilus-list-dim-label {
29
color: theme-color.hint(theme-color.$on-surface);
30
}
31
32
.nautilus-desktop.nautilus-canvas-item {
33
@extend %iconview-desktop;
34
}
35
36
// Toolbar
37
38
@keyframes nautilus-operations-button-needs-attention {
39
to {
40
background-color: theme-color.focus-overlay(theme-color.$on-titlebar);
41
}
42
}
43
44
.nautilus-operations-button-needs-attention {
45
animation: nautilus-operations-button-needs-attention theme.$ripple-fade-out-duration theme.$ease 2 alternate;
46
}
47
48
.nautilus-operations-button-needs-attention-multiple {
49
animation: nautilus-operations-button-needs-attention theme.$ripple-fade-out-duration theme.$ease 6 alternate;
50
}
51
52
.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button {
53
border-radius: theme.$circular-radius;
54
}
55
56
// Path bar
57
58
.path-bar-box {
59
transition: background-color theme.$duration theme.$ease-out;
60
margin: theme.$container-padding 0;
61
border-radius: theme.$corner-radius;
62
63
// reset the margin
64
button {
65
margin: 0;
66
}
67
68
&.width-maximized {
69
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
70
}
71
72
// workaround for 3.30.1
73
&.background.frame {
74
border-style: none;
75
background-color: theme-color.entry-fill(theme-color.$on-titlebar);
76
}
77
78
// for 3.30
79
.path-bar button {
80
label:not(:only-child) {
81
&:first-child {
82
margin-left: 0;
83
}
84
85
&:last-child {
86
margin-right: 0;
87
}
88
}
89
}
90
91
// for 3.32
92
.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) {
93
padding-left: (theme.$medium-size - 24px) / 2;
94
padding-right: (theme.$medium-size - 24px) / 2;
95
96
&.text-button {
97
min-width: 0;
98
}
99
100
label:not(:only-child) {
101
&:first-child {
102
margin-left: 0;
103
}
104
105
&:last-child {
106
margin-right: 0;
107
}
108
}
109
110
&.text-button.image-button image:not(:only-child) {
111
margin: 0;
112
}
113
114
&:last-child:dir(ltr),
115
&:first-child:dir(rtl) {
116
@extend %titlebar-button-checked;
117
}
118
}
119
}
120
121
// Floating status bar
122
.nautilus-window .floating-bar {
123
min-height: 32px;
124
padding: 0;
125
border-style: solid solid none;
126
border-width: 1px;
127
border-color: theme-color.divider(theme-color.$on-surface);
128
border-radius: (theme.$corner-radius + 1px) (theme.$corner-radius + 1px) 0 0;
129
background-clip: padding-box;
130
background-color: theme-color.$surface-z8;
131
132
// axes left border and border radius
133
&.bottom.left {
134
margin-right: 8px - 1px;
135
border-left-style: none;
136
border-top-left-radius: 0;
137
}
138
139
// axes right border and border radius
140
&.bottom.right {
141
margin-left: 8px - 1px;
142
border-right-style: none;
143
border-top-right-radius: 0;
144
}
145
146
button {
147
margin: (32px - theme.$small-size) / 2;
148
149
@extend %button-small;
150
}
151
}
152
153
.disk-space-display {
154
// border-style: solid;
155
// border-width: 2px;
156
157
&.unknown {
158
background-color: theme-color.stroke(theme-color.$on-surface);
159
color: theme-color.stroke(theme-color.$on-surface);
160
}
161
162
&.used {
163
background-color: theme-color.$primary;
164
color: theme-color.$primary;
165
}
166
167
&.free {
168
background-color: theme-color.fill(theme-color.$on-surface);
169
color: theme-color.fill(theme-color.$on-surface);
170
}
171
}
172
173
// View
174
175
// Hide superfluous treeview drop target indication
176
.nautilus-list-view .view:not(.dnd) {
177
// border-bottom: 1px solid divider($on-surface);
178
}
179
180
.nautilus-empty-state-icon + .large-title {
181
@extend .title-1;
182
color: theme-color.hint(theme-color.$on-surface);
183
}
184
185
.search-information {
186
padding: 2px;
187
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
188
}
189
190
.documents-entry-tag {
191
@extend .entry-tag;
192
}
193
194
.conflict-row:not(:selected) {
195
background-color: color.mix(theme-color.$warning, theme-color.$surface-z1, math.percentage(.3));
196
}
197
198
// Icon view
199
.nautilus-window flowboxchild {
200
.icon-background {
201
// background-color: black;
202
}
203
204
.icon-item-background {
205
padding: 4px;
206
border-radius: theme.$corner-radius;
207
}
208
209
&:selected {
210
background-color: transparent;
211
212
.icon-item-background {
213
background-color: theme-color.$selected-overlay;
214
}
215
}
216
}
217
218
// Batch rename dialog
219
dialog.background > box.dialog-vbox.vertical > grid.horizontal {
220
> scrolledwindow.frame {
221
border-style: none;
222
}
223
224
> box.horizontal:last-child {
225
margin: -6px 0 0 -6px;
226
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
227
228
> label {
229
margin: 0 8px;
230
}
231
232
> box > button {
233
border-radius: 0;
234
}
235
}
236
}
237
238
// Tweak to fix the messy sizing of the popover menu
239
.nautilus-window > popover.menu:not(:last-child) {
240
padding: 3px;
241
242
> stack > box > box > box {
243
margin-top: -6px;
244
245
> box {
246
margin-bottom: -6px;
247
248
&.linked {
249
margin-top: 1px;
250
}
251
}
252
}
253
254
separator {
255
margin-bottom: -2px;
256
}
257
}
258
259
.nautilus-menu-sort-heading {
260
// min-height: 26px;
261
// padding-left: 5px;
262
// padding-right: 5px;
263
margin: 1px 3px;
264
font-weight: 500;
265
266
&:disabled {
267
color: theme-color.hint(theme-color.$on-surface);
268
}
269
}
270
271
// Make operations button circular
272
.nautilus-window headerbar revealer > button {
273
border-radius: theme.$circular-radius;
274
}
275
276
// Ensure paned separator rendering. See issue #84 for details.
277
.nautilus-window paned > separator {
278
background-color: theme-color.$surface-z0;
279
}
280
281
282
/**
283
* gedit
284
*/
285
286
// based css:
287
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit.adwaita.css
288
// hard-coded css:
289
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit-style.css
290
291
// Only normal state is handle
292
.open-document-selector-name-label {
293
// font-weight: bold;
294
}
295
296
// Only normal state is handle
297
.open-document-selector-path-label {
298
color: theme-color.hint(theme-color.$on-surface);
299
font-size: smaller;
300
}
301
302
// Only normal state is handle
303
.open-document-selector-match {
304
background-color: theme-color.$warning;
305
color: theme-color.$on-warning;
306
}
307
308
.gedit-document-panel {
309
// Try to look as the notebook tab close button
310
row button.flat {
311
margin-top: 8px;
312
margin-bottom: 8px;
313
314
@extend %button-small;
315
}
316
}
317
318
.gedit-document-panel-group-row:not(:first-child) {
319
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
320
}
321
322
.gedit-side-panel-paned statusbar {
323
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
324
}
325
326
.gedit-search-slider {
327
margin: 4px 4px 8px;
328
329
.linked:not(.vertical) > entry {
330
border-radius: theme.$corner-radius;
331
@extend %entry_raised;
332
333
.gedit-search-entry-occurrences-tag {
334
all: unset;
335
color: theme-color.hint(theme-color.$on-surface);
336
}
337
338
$buttons_width: theme.$small-size * 2 + theme.$container-padding * 3;
339
340
&:dir(ltr) {
341
margin-right: -$buttons_width;
342
padding-right: $buttons_width;
343
344
.gedit-search-entry-occurrences-tag {
345
margin-left: theme.$container-padding;
346
}
347
348
image.right {
349
margin-right: 0;
350
}
351
}
352
353
&:dir(rtl) {
354
margin-left: -$buttons_width;
355
padding-left: $buttons_width;
356
357
.gedit-search-entry-occurrences-tag {
358
margin-right: theme.$container-padding;
359
}
360
361
image.left {
362
margin-left: 0;
363
}
364
}
365
366
&:not(.error) {
367
background-color: theme-color.$surface-z8;
368
}
369
370
&.error ~ button {
371
color: theme-color.hint(theme-color.$on-error);
372
@include drawing.ink-color(theme-color.$on-error, $button-style: "flat");
373
374
&:disabled {
375
color: theme-color.disabled-hint(theme-color.$on-error);
376
}
377
}
378
}
379
380
.linked:not(.vertical) > button {
381
border: solid theme.$container-padding transparent;
382
border-radius: theme.$circular-radius;
383
background-clip: padding-box;
384
385
@extend %button-flat-basic;
386
@extend %button-small;
387
388
&:last-child:dir(ltr),
389
&:not(:first-child):dir(rtl) {
390
margin-left: -(theme.$container-padding) / 2;
391
}
392
393
&:first-child:dir(rtl),
394
&:not(:last-child):dir(ltr) {
395
margin-right: -(theme.$container-padding) / 2;
396
}
397
}
398
}
399
400
frame.gedit-map-frame > border {
401
&:dir(ltr) {
402
border-style: none none none solid;
403
}
404
405
&:dir(rtl) {
406
border-style: none solid none none;
407
}
408
}
409
410
/**
411
* Tweaks
412
*/
413
414
// hard-coded css:
415
// https://gitlab.gnome.org/GNOME/gnome-tweaks/blob/master/data/shell.css
416
417
// the sidebar
418
.tweak-categories {
419
// padding: 4px 0;
420
// background-color: shade(@theme_bg_color, 0.99);
421
background-image: image(theme-color.$surface-z0);
422
423
separator {
424
@extend %hide_separators;
425
}
426
}
427
428
.tweak {
429
// padding-top: 3px;
430
padding: 3px;
431
432
&.title:hover {
433
box-shadow: none;
434
}
435
}
436
437
.tweak-group-white,
438
.tweak-white,
439
.tweak-white:hover {
440
// background-color: white;
441
background-image: image(theme-color.$surface-z1);
442
}
443
444
.tweak-startup,
445
.tweak-startup:hover {
446
// background-color: lighter(shade(@theme_bg_color, 0.9));
447
background-image: image(theme-color.$surface-z1);
448
}
449
450
.tweak-group-startup {
451
border: 1px solid theme-color.divider(theme-color.$on-surface);
452
background-clip: padding-box;
453
// background-color: @view_separators;
454
background-image: image(theme-color.$surface-z1);
455
}
456
457
//
458
// Workaround for 3.26
459
//
460
461
row#Focus,
462
row#ClickMethod,
463
row#StaticWorkspaceTweak, // for 3.26.0
464
row#dynamic-workspaces,
465
row#PrimaryWorkspaceTweak, // for 3.26.0
466
row#workspaces-only-on-primary {
467
padding: 0;
468
border: 1px solid theme-color.divider(theme-color.$on-surface);
469
background-clip: padding-box;
470
background-image: image(theme-color.$surface-z1);
471
472
row:not(:last-child) {
473
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
474
}
475
476
&.tweak > list {
477
margin-top: -3px;
478
}
479
}
480
481
// Add more spaces between title and list
482
row#Focus,
483
row#ClickMethod,
484
row#PrimaryWorkspaceTweak, // for 3.26.0
485
row#workspaces-only-on-primary {
486
margin-top: 4px;
487
}
488
489
// Workaround for gnome-tweaks >= 3.34
490
// See https://github.com/nana-4/materia-theme/issues/432
491
leaflet.titlebar > .titlebar.tweak-titlebar-left,
492
leaflet.titlebar > .titlebar.tweak-titlebar-right,
493
hdyleaflet.titlebar > .titlebar.tweak-titlebar-left,
494
hdyleaflet.titlebar > .titlebar.tweak-titlebar-right {
495
background-color: inherit;
496
box-shadow: inherit;
497
// Remove only background-color transition.
498
// This shouldn't be necessary, but otherwise it gets lag...
499
transition: color theme.$duration theme.$ease-out;
500
501
+ separator {
502
background-color: inherit;
503
background-image: image(theme-color.divider(theme-color.$on-titlebar));
504
}
505
}
506
507
/**
508
* Builder
509
*/
510
511
// based css for 3.22:
512
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-22/data/theme
513
// based css for 3.24:
514
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-24/data/theme
515
// based css for 3.26:
516
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-26/data/themes
517
518
// Layout tab and tab bar tweaks
519
// The following makes the layout stack header look similar to a tab bar.
520
layouttabbar {
521
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
522
background-color: theme-color.$surface-z0;
523
524
button {
525
@extend %button-flat-activatable;
526
}
527
528
> box > button {
529
margin: (40px - theme.$medium-size) / 2 0;
530
// border-radius: 0;
531
}
532
}
533
534
layouttab {
535
margin: 0 8px; // not working
536
border-style: none solid;
537
border-width: 1px;
538
border-color: theme-color.divider(theme-color.$on-surface);
539
box-shadow: inset 0 -2px theme-color.$primary;
540
background-color: theme-color.$surface-z1;
541
542
separator.vertical {
543
margin: 8px 4px;
544
}
545
546
button {
547
&,
548
&.text-button,
549
&.image-button {
550
margin-top: 8px;
551
margin-bottom: 8px;
552
padding: 0 4px;
553
}
554
}
555
556
// Close button styling for layouttab.
557
> box > button.close {
558
// border-radius: $circular-radius;
559
}
560
}
561
562
layout {
563
border: 1px solid theme-color.divider(theme-color.$on-surface);
564
-PnlDockBin-handle-size: 1;
565
}
566
567
entry.search-missing {
568
background-color: theme-color.$error;
569
color: theme-color.$on-error;
570
}
571
572
// tweak icons for treeviews
573
window.workbench treeview.image {
574
color: theme-color.hint(theme-color.$on-surface);
575
}
576
577
popover.popover-selector list {
578
padding: 8px - 2px;
579
580
row {
581
border-radius: theme.$corner-radius;
582
583
image {
584
&:dir(ltr) {
585
margin-right: 6px;
586
}
587
588
&:dir(rtl) {
589
margin-left: 6px;
590
}
591
}
592
593
.accel {
594
&:dir(ltr) {
595
margin-left: 6px;
596
}
597
598
&:dir(rtl) {
599
margin-right: 6px;
600
}
601
}
602
}
603
}
604
605
omnibar {
606
&.linked:not(.vertical) entry {
607
border-radius: theme.$corner-radius;
608
}
609
610
entry {
611
color: theme-color.hint(theme-color.$on-surface);
612
}
613
}
614
615
popover.omnibar list row:not(:last-child) {
616
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
617
}
618
619
entry.preferences-search {
620
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
621
box-shadow: none;
622
background-color: transparent;
623
624
// doesn't work properly
625
&:dir(ltr) {
626
// border-right: 1px solid divider($on-surface);
627
}
628
629
&:dir(rtl) {
630
// border-left: 1px solid divider($on-surface);
631
}
632
}
633
634
preferences stacksidebar.sidebar {
635
list {
636
// background-color: $surface-z0;
637
}
638
639
&:dir(ltr),
640
&:dir(rtl) {
641
list {
642
border-style: none;
643
}
644
}
645
646
list separator {
647
@extend %hide_separators;
648
}
649
}
650
651
preferences > box > box {
652
&:dir(ltr) {
653
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
654
}
655
656
&:dir(rtl) {
657
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
658
}
659
}
660
661
popover.messagepopover {
662
&.background {
663
padding: 0;
664
}
665
666
.popover-action-area button {
667
@extend %button-flat-basic;
668
669
padding: 8px 16px;
670
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
671
border-radius: 0;
672
673
&:first-child {
674
border-bottom-left-radius: theme.$corner-radius;
675
}
676
677
&:last-child {
678
border-bottom-right-radius: theme.$corner-radius;
679
}
680
}
681
682
.popover-content-area {
683
margin: 16px;
684
}
685
}
686
687
popover.transfers list {
688
background-color: transparent;
689
690
row:not(:first-child) {
691
border-top: 1px solid theme-color.divider(theme-color.$on-surface);
692
}
693
694
row > box {
695
padding: 10px;
696
}
697
}
698
699
dockbin {
700
border: 1px solid theme-color.divider(theme-color.$on-surface);
701
-PnlDockBin-handle-size: 1;
702
}
703
704
dockpaned {
705
border: 1px solid theme-color.divider(theme-color.$on-surface);
706
}
707
708
eggsearchbar box.search-bar {
709
padding: 0 8px;
710
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
711
background-color: theme-color.$surface-z0;
712
}
713
714
docktabstrip {
715
padding: 0 8px;
716
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
717
background-color: theme-color.$surface-z0;
718
}
719
720
docktab {
721
transition: theme.$transition,
722
background-size 0ms,
723
background-image 0ms;
724
min-height: theme.$small-size;
725
min-width: theme.$small-size;
726
margin-bottom: -1px;
727
padding: theme.$container-padding 6px;
728
729
border-width: 1px; // for reorderable tabs
730
border-color: transparent; //
731
732
box-shadow: inset 0 -2px transparent;
733
background-image: radial-gradient(circle, theme-color.$primary 10%, transparent 0%);
734
background-repeat: no-repeat;
735
background-position: center;
736
background-size: 0% 0%;
737
738
color: theme-color.hint(theme-color.$on-surface);
739
font-weight: 500;
740
741
&:hover {
742
background-color: theme-color.hover-overlay(theme-color.$on-surface);
743
}
744
745
&:checked {
746
transition: theme.$transition,
747
background-size theme.$ripple-fade-in-duration theme.$ease-out,
748
background-image theme.$ripple-fade-in-duration + theme.$ripple-fade-out-duration theme.$ease-out;
749
box-shadow: inset 0 -2px theme-color.$primary;
750
background-color: transparent;
751
background-image: radial-gradient(circle, transparent 10%, transparent 0%);
752
background-size: 1000% 1000%;
753
color: theme-color.$on-surface;
754
}
755
}
756
757
dockoverlayedge {
758
background-color: theme-color.$surface-z0;
759
760
docktabstrip {
761
padding: 0;
762
border: none;
763
}
764
765
&.left-edge docktab:checked {
766
box-shadow: inset -2px 0 theme-color.$primary;
767
}
768
769
&.right-edge docktab:checked {
770
box-shadow: inset 2px 0 theme-color.$primary;
771
}
772
}
773
774
pillbox {
775
background-color: theme-color.$surface-z0;
776
border-radius: theme.$corner-radius;
777
}
778
779
buildperspective row {
780
// padding: 10px;
781
}
782
783
layoutpane entry.search {
784
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
785
box-shadow: none;
786
background-color: theme-color.$surface-z1;
787
}
788
789
editortweak entry.search {
790
margin-bottom: -1px;
791
box-shadow: none;
792
background-color: transparent;
793
}
794
795
//
796
// let's tweak hard-coded elements
797
//
798
799
.gb-search-entry-occurrences-tag {
800
box-shadow: none;
801
background-color: transparent;
802
}
803
804
// Keep search bar and layouttab height in sync.
805
// layouttabbar > box,
806
// eggsearchbar > revealer > box,
807
docktabstrip {
808
min-height: 39px;
809
}
810
811
eggsearchbar entry {
812
// min-height: 24px;
813
}
814
815
window.workbench preferences preferencesgroup list entry {
816
// background: none;
817
// min-height: 0px;
818
padding-top: 8px;
819
padding-bottom: 8px;
820
}
821
822
button.run-arrow-button {
823
// min-width: 12px;
824
padding-left: (theme.$medium-size - 16px) / 2;
825
padding-right: (theme.$medium-size - 16px) / 2;
826
}
827
828
//
829
// Additional styles for 3.26
830
//
831
832
button.dzlmenubutton image {
833
min-width: theme.$medium-size - 6px;
834
835
&.arrow {
836
min-width: theme.$medium-size - 9px;
837
}
838
}
839
840
button.dzlmenubuttonitem {
841
color: theme-color.$on-surface;
842
font-weight: normal;
843
844
&:disabled {
845
color: theme-color.disabled(theme-color.$on-surface);
846
}
847
}
848
849
idelayoutstackheader {
850
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
851
852
button:checked {
853
color: theme-color.$on-surface;
854
}
855
}
856
857
// utilities stack switcher
858
ideeditorutilities > dzldockpaned > box > stackswitcher {
859
padding: 8px 0;
860
background-color: theme-color.$surface-z0;
861
862
&:dir(ltr) {
863
border-right: 1px solid theme-color.divider(theme-color.$on-surface);
864
}
865
866
&:dir(rtl) {
867
border-left: 1px solid theme-color.divider(theme-color.$on-surface);
868
}
869
870
button {
871
border-radius: 0;
872
box-shadow: none;
873
background-color: transparent;
874
875
&:active {
876
background-image: radial-gradient(circle, rgba(theme-color.$primary, .7) 10%, transparent 0%);
877
}
878
879
&:checked {
880
background-color: transparent;
881
color: theme-color.$on-surface;
882
}
883
884
&:dir(ltr) {
885
margin-right: -1px;
886
887
&:checked {
888
box-shadow: inset -2px 0 theme-color.$primary;
889
}
890
}
891
892
&:dir(rtl) {
893
margin-left: -1px;
894
895
&:checked {
896
box-shadow: inset 2px 0 theme-color.$primary;
897
}
898
}
899
}
900
}
901
902
// buildui panel
903
ideeditorsidebar notebook header {
904
background: transparent;
905
}
906
907
popover.messagepopover {
908
// padding: 0;
909
910
list {
911
border: 1px solid theme-color.divider(theme-color.$on-surface);
912
background-clip: padding-box;
913
914
row:not(:last-child) {
915
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
916
}
917
}
918
}
919
920
// Workaround for hard-coded .title color
921
dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row:selected {
922
.title {
923
// color: @theme_selected_fg_color;
924
}
925
926
background-color: theme-color.$primary;
927
color: theme-color.$on-primary;
928
}
929
930
// Workaround for hard-coded button background
931
#titlebar_container .suggestionbutton button {
932
// background-color: @content_view_bg;
933
// background-image: none;
934
935
padding: 0;
936
border-radius: 0;
937
box-shadow: inset 0 0 0 9999px theme-color.$titlebar;
938
939
&:backdrop {
940
box-shadow: inset 0 0 0 9999px theme-color.$titlebar-backdrop;
941
}
942
943
// For some reason background-image doesn't work well with transition :(
944
image {
945
transition:
946
box-shadow theme.$duration theme.$ease-out,
947
background-color theme.$ripple-fade-in-duration theme.$ease-out;
948
min-width: theme.$medium-size;
949
min-height: theme.$medium-size;
950
border-radius: theme.$circular-radius;
951
box-shadow: inset 0 0 0 9999px transparent;
952
}
953
954
&:hover image {
955
box-shadow: inset 0 0 0 9999px theme-color.hover-overlay(theme-color.$on-titlebar);
956
}
957
958
&:focus image {
959
box-shadow: inset 0 0 0 9999px theme-color.focus-overlay(theme-color.$on-titlebar);
960
}
961
962
&:active image {
963
background-color: theme-color.pressed-overlay(theme-color.$on-titlebar);
964
}
965
}
966
967
/**
968
* Photos
969
*/
970
971
// based css:
972
// https://gitlab.gnome.org/GNOME/gnome-photos/blob/master/data/Adwaita.css
973
974
GdMainIconView.content-view {
975
-GdMainIconView-icon-size: 48;
976
977
// Make spinner visible on both dark and bright backgrounds w/o making
978
// it look ugly/weird.
979
&.cell:active {
980
// color: disabled($on-surface);
981
}
982
}
983
984
.documents-counter {
985
margin: 8px;
986
border-radius: theme.$circular-radius;
987
box-shadow: theme.$shadow-z4;
988
background-color: theme-color.$primary;
989
color: theme-color.$on-primary;
990
font-weight: bold;
991
}
992
993
.photos-entry-tag {
994
@extend .entry-tag;
995
}
996
997
.documents-scrolledwin.frame {
998
border-style: none;
999
background-color: transparent;
1000
1001
frame.content-view > border {
1002
border-style: none;
1003
background-color: transparent;
1004
}
1005
}
1006
1007
.photos-icon-bg {
1008
}
1009
1010
.photos-fade-in {
1011
opacity: 1;
1012
transition: opacity theme.$duration theme.$ease-out;
1013
}
1014
1015
.photos-fade-out {
1016
opacity: 0;
1017
transition: opacity theme.$duration theme.$ease-out;
1018
}
1019
1020
.photos-collection-icon {
1021
}
1022
1023
button.photos-filter-preview {
1024
color: theme-color.$on-surface;
1025
font-weight: normal;
1026
1027
&:checked {
1028
background-color: theme-color.$selected-overlay;
1029
color: theme-color.$on-surface;
1030
1031
image {
1032
color: theme-color.$on-dark;
1033
-gtk-icon-shadow: theme.$text-shadow;
1034
}
1035
}
1036
}
1037
1038
overlay grid.horizontal > revealer > scrolledwindow.frame {
1039
border-style: none;
1040
background-color: transparent;
1041
1042
&:dir(ltr) {
1043
border-left-style: solid;
1044
}
1045
1046
&:dir(rtl) {
1047
border-right-style: solid;
1048
}
1049
}
1050
1051
/**
1052
* Music
1053
*/
1054
1055
// hard-coded css:
1056
// https://gitlab.gnome.org/GNOME/gnome-music/blob/master/data/application.css
1057
1058
.side-panel:dir(ltr) {
1059
// border-width: 0 1px 0 0;
1060
border-style: solid;
1061
border-color: theme-color.divider(theme-color.$on-surface);
1062
}
1063
1064
.side-panel:dir(rtl) {
1065
// border-width: 0 0 0 1px;
1066
border-style: solid;
1067
border-color: theme-color.divider(theme-color.$on-surface);
1068
}
1069
1070
.side-panel .view {
1071
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
1072
background-image: image(theme-color.$surface-z0);
1073
1074
&:hover {
1075
background-image: image(theme-color.hover-overlay(theme-color.$on-surface, $on: theme-color.$surface-z0));
1076
}
1077
}
1078
1079
.side-panel .view:selected {
1080
// background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
1081
background-image: image(theme-color.$primary);
1082
1083
&:hover {
1084
background-image: image(theme-color.hover-overlay(theme-color.$on-primary, $on: theme-color.$primary));
1085
}
1086
}
1087
1088
.songs-list {
1089
// box-shadow: inset 0 -1px shade(@borders, 1.30);
1090
// background-color: @theme_bg_color;
1091
1092
&:hover {
1093
background-image: image(theme-color.hover-overlay(theme-color.$on-surface));
1094
}
1095
}
1096
1097
frame.documents-dropdown {
1098
@extend %toolbar-osd;
1099
1100
margin: 8px;
1101
1102
> border {
1103
border: none;
1104
}
1105
}
1106
1107
box.vertical > revealer > toolbar.search-bar {
1108
border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
1109
1110
button > widget {
1111
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
1112
// -GtkArrow-arrow-scaling: 1;
1113
}
1114
}
1115
1116
/**
1117
* Terminal
1118
*/
1119
1120
terminal-window notebook > header > box {
1121
// Remove hard-coded margin around button(s)
1122
margin: -2px;
1123
1124
button {
1125
border-radius: 0;
1126
}
1127
}
1128
1129
/**
1130
* To Do
1131
*/
1132
1133
// less than 3.28
1134
task-list-view {
1135
taskrow {
1136
transition: theme.$transition;
1137
margin: 0 -8px;
1138
1139
&:hover {
1140
transition: none;
1141
}
1142
1143
label {
1144
margin: 0 8px;
1145
}
1146
1147
image.dim-label {
1148
min-width: 16px;
1149
}
1150
}
1151
1152
> box > revealer > box > button {
1153
margin: (12px * 2 - theme.$medium-size) / 2;
1154
1155
.dim-label {
1156
color: inherit;
1157
}
1158
}
1159
}
1160
1161
// 3.28 or later
1162
tasklistview {
1163
taskrow {
1164
outline: none;
1165
1166
entry {
1167
&,
1168
&:focus,
1169
&:disabled {
1170
box-shadow: none;
1171
}
1172
}
1173
1174
image.dim-label {
1175
min-width: 16px;
1176
}
1177
}
1178
1179
> box > revealer > box > button {
1180
margin: (12px * 2 - theme.$medium-size) / 2;
1181
1182
.dim-label {
1183
color: inherit;
1184
}
1185
}
1186
}
1187
1188
/**
1189
* eog
1190
*/
1191
1192
#eog-thumb-nav {
1193
scrolledwindow.frame {
1194
border-top: none;
1195
}
1196
}
1197
1198
/**
1199
* Evolution
1200
*/
1201
1202
frame.taskbar > border {
1203
border-style: solid none none;
1204
}
1205
1206
box.vertical > paned.horizontal notebook widget .frame {
1207
border-style: none;
1208
}
1209
1210
/**
1211
* gitg
1212
*/
1213
1214
frame.commit-frame > border {
1215
border-style: solid none none;
1216
}
1217
1218
/**
1219
* Characters
1220
*/
1221
1222
box.dialog-vbox scrolledwindow.related {
1223
border: 1px solid theme-color.divider(theme-color.$on-surface);
1224
background-clip: padding-box;
1225
background-color: theme-color.$surface-z1;
1226
}
1227
1228
list.categories {
1229
background-image: image(theme-color.$surface-z0);
1230
}
1231
1232
/**
1233
* Boxes
1234
*/
1235
1236
.transparent-bg + stack overlay > label {
1237
min-height: 24px;
1238
padding: 0 4px;
1239
border-radius: theme.$corner-radius;
1240
background-color: theme-color.$scrim;
1241
color: theme-color.$on-scrim;
1242
}
1243
1244
/**
1245
* Evince
1246
*/
1247
1248
// Color is needed for Evince to match hardcoded background-color,
1249
// since Documents app is also uses this style, background-color needs to be set accordingly.
1250
evview.content-view.view:selected {
1251
background-color: theme-color.$primary;
1252
color: theme-color.$on-primary;
1253
}
1254
1255
/**
1256
* Polari
1257
*/
1258
1259
// hard-coded css:
1260
// https://gitlab.gnome.org/GNOME/polari/blob/master/data/resources/application.css
1261
1262
// background-color is needed to match hard-coded row colors.
1263
// Just $primary is too harsh for activated rows, so add transparency.
1264
.polari-room-list row:selected {
1265
background-color: rgba(theme-color.$primary, .5);
1266
}
1267
1268
/**
1269
* Fractal
1270
*/
1271
1272
.message-input-area button {
1273
@extend %button-flat-activatable;
1274
}
1275
1276
// To display the drop shadow
1277
button.osd.scroll_button {
1278
margin: 4px;
1279
}
1280
1281
/**
1282
* Mines
1283
*/
1284
1285
grid.minefield > button.tile {
1286
border-style: solid;
1287
}
1288