ASCII text
1
// floating status bar
2
.floating-bar {
3
@extend %osd;
4
// @extend .toolbar.osd;
6
min-height: 32px;
8
padding: 0;
9
border-style: solid solid none;
10
border-width: 1px;
11
border-color: $borders_color;
12
border-radius: (2px + 1px) (2px + 1px) 0 0;
13
background-color: $base_color;
14
background-clip: $extra_background_clip;
15
transition: $material_transition, border-width 0;
16
&.left {
18
margin-right: 8px - 1px;
19
border-left-style: none;
20
border-top-left-radius: 0;
21
}
22
&.right {
24
margin-left: 8px - 1px;
25
border-right-style: none;
26
border-top-right-radius: 0;
27
}
28
button {
30
min-height: 24px;
31
min-width: 24px;
32
margin: 4px;
33
padding: 0;
34
}
35
}
36
/************
39
* Nautilus *
40
************/
41
.nautilus-window,
42
.nautilus-window notebook,
43
.nautilus-window notebook > stack {
44
background: $base_color;
45
}
46
.nautilus-desktop-window,
48
.nautilus-desktop-window notebook,
49
.nautilus-desktop-window notebook > stack {
50
background: transparent;
51
}
52
.nautilus-canvas-item {
54
// border-radius: 2px;
55
}
56
.nautilus-canvas-item.dim-label,
58
.nautilus-list-dim-label {
59
// @extend .dim-label;
60
}
61
.nautilus-canvas-item.dim-label:selected,
63
.nautilus-list-dim-label:selected {
64
}
65
.nautilus-desktop.nautilus-canvas-item {
67
// background-color: scale-alpha(#000000, $lower_opacity);
68
color: $selected_fg_color;
69
text-shadow: $z-depth-1;
70
}
71
.nautilus-desktop.nautilus-canvas-item:selected {
73
// color: $selected_fg_color;
74
text-shadow: none;
75
}
76
.nautilus-circular-button {
78
@extend %button_basic.image-button;
79
}
80
// Toolbar
82
@keyframes needs_attention_keyframes {
83
0% {background-color: transparent; }
84
50% {background-color: $track_color; }
85
100% {background-color: transparent; }
86
}
87
.nautilus-operations-button-needs-attention {
89
color: $accent_bg_color;
90
animation: needs_attention_keyframes 2s $material_ease;
91
}
92
.nautilus-operations-button-needs-attention-multiple {
94
color: $accent_bg_color;
95
animation: needs_attention_keyframes 2s $material_ease;
96
animation-iteration-count: 2;
97
}
98
.disk-space-display {
100
// border-style: solid;
101
// border-width: 2px;
102
}
103
.disk-space-display.unknown {
105
background-color: $warning_color;
106
}
107
.disk-space-display.used {
109
background-color: $selected_bg_color;
110
}
111
.disk-space-display.free {
113
background-color: $track_color;
114
color: $insensitive_fg_color;
115
}
116
// View
118
.nautilus-list-view .view {
119
// border-bottom: 1px solid $borders_color;
120
}
121
// Hide superfluous treeview drop target indication
123
.nautilus-list-view .view.dnd {
124
// border-style: none;
125
}
126
// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
128
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
129
.documents-entry-tag {
130
// min-height: 24px;
131
margin: 3px -2px 3px 8px;
132
padding: 0 8px;
133
border-radius: 100px;
134
box-shadow: none;
135
background-color: $selected_bg_color;
136
color: $selected_fg_color;
137
&:hover { box-shadow: $z-depth-1; }
139
}
140
.documents-entry-tag.button {
142
// @extend %button_basic.flat;
143
// min-height: 24px;
145
// min-width: 24px;
146
margin: 0 -2px;
147
padding: 4px;
148
border-radius: 100px;
149
box-shadow: none;
150
color: $secondary_selected_fg_color;
151
&:hover, &:active { color: $selected_fg_color; }
153
}
154
// Workaround for the double border of the searchbar since we use a revealer which
156
// always allocates at least 1 pixel
157
.nautilus-window searchbar { border-top: 1px solid $borders_color; }
158
.nautilus-window .searchbar-container { margin-top: -1px; }
160
/*********
163
* gedit *
164
*********/
165
.open-document-selector-treeview:hover {
166
}
167
.open-document-selector-treeview:selected:hover {
169
}
170
/* Only normal state is handle */
172
.open-document-selector-name-label {
173
font-weight: bold;
174
}
175
/* Only normal state is handle */
177
.open-document-selector-path-label {
178
color: gtkalpha(currentColor, $hint_opacity);
179
font-size: smaller;
180
// @extend .dim-label;
182
}
183
.gedit-document-panel {
185
background-color: $light_color;
186
}
187
.gedit-document-panel row:selected {
189
}
190
.gedit-document-panel-group-row,
192
.gedit-document-panel-group-row:hover {
193
border-top: 1px solid gtkalpha(currentColor, 0.3);
194
}
195
.gedit-document-panel-group-row:first-child,
197
.gedit-document-panel-group-row:first-child:hover {
198
border-top: 0px;
199
}
200
/* Try to look as the notebook tab close button */
202
.gedit-document-panel row button.flat {
203
min-height: $small_size;
204
min-width: $small_size;
205
padding: 0;
206
margin-top: 8px;
207
margin-bottom: 8px;
208
@extend %button_basic.image-button;
210
}
211
statusbar {
213
border-top: 1px solid $borders_color;
214
}
215
.gedit-search-slider {
217
margin: 4px 4px 8px;
218
.gedit-search-entry-occurrences-tag {
220
all: unset;
221
padding: 0 4px;
222
color: gtkalpha(currentColor, $hint_opacity);
223
}
224
entry {
226
&:dir(ltr) {
227
margin-right: -$medium_size * 2;
228
padding-right: $medium_size * 2 + 8px;
229
.gedit-search-entry-occurrences-tag { margin-right: -8px; }
231
}
232
&:dir(rtl) {
234
margin-left: -$medium_size * 2;
235
padding-left: $medium_size * 2 + 8px;
236
.gedit-search-entry-occurrences-tag { margin-left: -8px; }
238
}
239
&.error ~ button { @extend %button_selected.flat; }
241
}
242
button {
244
@extend %button_basic.flat;
245
&:dir(ltr),
247
&:dir(rtl) { @extend %linked; }
248
}
249
}
250
// Yeah this is ugly
252
.gedit-search-slider .linked:not(.vertical) > entry,
253
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
254
border-radius: 2px;
255
}
256
/**************
259
* Tweak Tool *
260
**************/
261
// the sidebar
262
.tweak-categories {
263
// padding: 4px 0;
264
// background-color: shade(@theme_bg_color, 0.99);
265
background-image: image($light_color);
266
// hide separators
268
separator {
269
min-width: 0;
270
min-height: 0;
271
background: transparent;
272
}
273
}
274
.tweak-category {
276
// padding: 10px;
277
}
278
// the container and tweaks in a group
280
.tweak-group {
281
// background-color: rgba(0, 0, 0, 0);
282
}
283
.tweak {
285
padding: 3px;
286
// padding-top: 3px;
287
// background-color: rgba(0, 0, 0, 0);
288
}
289
.tweak:hover {
291
// background-color: rgba(0, 0, 0, 0);
292
}
293
.tweak.title {
295
// padding-top: 10px;
296
&:hover { background-image: none; }
298
}
299
.tweak-titlebar-left:dir(ltr),
301
.tweak-titlebar-right:dir(rtl) {
302
// border-top-right-radius: 0;
303
}
304
.tweak-titlebar-right:dir(ltr),
306
.tweak-titlebar-left:dir(rtl) {
307
// border-top-left-radius: 0;
308
}
309
// individual tweak theme changes
311
.tweak.title#title-theme {
312
// padding-top: 3px;
313
}
314
.tweak#hinting,
316
.tweak#text-scaling-factor {
317
// padding-top: 20px;
318
}
319
.tweak-group-white,
321
.tweak-white,
322
.tweak-white:hover {
323
// background-color: white;
324
background-image: image($base_color);
325
}
326
.tweak-startup,
328
.tweak-startup:hover {
329
// background-color: lighter(shade(@theme_bg_color, 0.9));
330
background-image: image($base_color);
331
}
332
.tweak-group-startup {
334
// background-color: @view_separators;
335
background-image: image($base_color);
336
border: 1px solid $borders_color;
337
}
338
// NOT WORKING
340
.main-container {
341
// padding: 20px;
342
}
343
/***********
346
* Builder *
347
***********/
348
//
349
// Titlebar adjustments for workbench
350
//
351
// This is needed due to our placement of headerbar inside of a
352
// stack. We were seeing black edges around the header bar, and
353
// improper radius on the headerbar.
354
//
355
workbench stack.titlebar {
356
padding: 0;
357
// box-shadow: none;
358
}
359
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
361
border-radius: 2px 2px 0 0;
362
// box-shadow: none;
363
}
364
perspectiveswitcher {
366
background-color: $bg_color;
367
}
368
perspectiveswitcher button {
370
}
371
perspectiveswitcher button:hover {
373
}
374
perspectiveswitcher button:checked {
376
color: $selected_bg_color;
377
}
378
//
380
// Layout tab and tab bar tweaks
381
//
382
// The following makes the layout stack header look similar to a tab bar.
383
//
384
layouttabbar {
385
border-bottom: 1px solid $borders_color;
386
background-color: $bg_color;
387
}
388
layouttabbar button { @extend %button_basic.flat; }
390
layouttabbar > box > button {
392
margin: (40px - $medium_size) / 2 0;
393
// border-radius: 0;
394
}
395
layouttab {
397
margin: 0 8px; // not working
398
border-style: none solid;
399
border-width: 1px;
400
border-color: $borders_color;
401
box-shadow: inset 0 -2px $selected_bg_color;
402
background-color: $base_color;
403
}
404
layouttab separator.vertical {
406
margin: 8px 4px;
407
}
408
layouttab button {
410
&.text-button, &.image-button, & {
411
margin-top: 8px;
412
margin-bottom: 8px;
413
padding: 0 4px;
414
}
415
}
416
//
418
// Close button styling for layouttab.
419
//
420
layouttab > box > button.close {
421
border-radius: 100px;
422
}
423
layout {
425
border: 1px solid $borders_color;
426
-PnlDockBin-handle-size: 1;
427
}
428
entry.search-missing {
430
background-color: $error_color;
431
color: $selected_fg_color;
432
}
433
// tweak icons for treeviews
435
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
436
workbench treeview.image:selected { color: $tertiary_selected_fg_color; }
437
dockbin {
439
border: 1px solid $borders_color;
440
-PnlDockBin-handle-size: 1;
441
}
442
dockpaned {
444
border: 1px solid $borders_color;
445
}
446
eggsearchbar box.search-bar {
448
padding: 0 8px;
449
border-bottom: 1px solid $borders_color;
450
background-color: $bg_color;
451
}
452
docktabstrip {
454
padding: 0 8px;
455
border-bottom: 1px solid $borders_color;
456
background-color: $bg_color;
457
}
458
docktab {
460
transition: $material_transition;
461
min-height: $small_size;
462
min-width: $small_size;
463
margin-bottom: -1px;
464
padding: $container_padding 6px;
465
outline-offset: -6px;
467
border-width: 1px; // for reorderable tabs
469
border-color: transparent; //
470
color: $secondary_fg_color;
472
font-weight: 500;
473
&:hover {
475
box-shadow: inset 0 -2px $track_color;
476
color: $fg_color;
477
}
478
&:checked {
480
animation: tab_ripple_effect $material_slower * 3 $material_ease_out;
481
box-shadow: inset 0 -2px $selected_bg_color;
482
color: $fg_color;
483
}
484
}
485
dockoverlayedge {
487
background-color: $bg_color;
488
}
489
dockoverlayedge docktabstrip {
491
padding: 0;
492
border: none;
493
}
494
dockoverlayedge.left-edge docktab:checked {
496
border-right-color: $selected_bg_color;
497
border-bottom-color: transparent;
498
}
499
dockoverlayedge.right-edge docktab:checked {
501
border-left-color: $selected_bg_color;
502
border-bottom-color: transparent;
503
}
504
pillbox {
506
background-color: $bg_color;
507
border-radius: 2px;
508
}
509
layoutpane entry.search {
511
@extend %entry.flat;
512
box-shadow: inset 0 -1px $borders_color;
514
background-color: $base_color;
515
}
516
editortweak entry.search {
518
@extend %entry.flat;
519
margin-bottom: -1px;
521
box-shadow: none;
522
}
523
// work around some gtk padding issue
525
filechooser actionbar button.combo {
526
// padding: 0;
527
}
528
// styling for editor search
530
frame.gb-search-frame {
531
// background-image: linear-gradient(shade(@theme_bg_color,1.05), @theme_bg_color);
532
// padding: 6px;
533
// border-style: solid;
534
// border-color: @borders;
535
// border-left-width: 1px;
536
// border-right-width: 1px;
537
// border-bottom-width: 1px;
538
// border-bottom-left-radius: 5px;
539
border-bottom-right-radius: 5px;
540
}
541
frame.gb-search-frame border {
543
// border: none;
544
}
545
// styling for NautilusFloatingBar
547
.floating-bar {
548
// padding: 2px;
549
// background-color: @theme_base_color;
550
// border-width: 1px;
551
// border-style: solid solid none;
552
// border-color: @borders;
553
// border-radius: 3px 3px 0 0;
554
}
555
.floating-bar.bottom.left { // axes left border and border radius
557
// border-left-style: none;
558
// border-top-left-radius: 0;
559
}
560
.floating-bar.bottom.right { // axes right border and border radius
562
// border-right-style: none;
563
// border-top-right-radius: 0;
564
}
565
.floating-bar:backdrop {
567
// background-color: @theme_unfocused_base_color;
568
// border-color: @unfocused_borders;
569
}
570
.floating-bar button {
572
// padding: 4px;
573
}
574
.gb-search-entry-occurrences-tag {
576
// color: shade (@theme_unfocused_fg_color, 0.8);
577
// border: 0px;
578
// margin: 2px;
579
// padding: 2px;
580
box-shadow: none;
581
background-color: transparent;
582
}
583
//
585
// For our pattern of popover with lists (and close buttons).
586
//
587
popover list row {
588
// padding: 6px;
589
}
590
popover list row button {
592
// background: transparent;
593
// border: none;
594
// box-shadow: none;
595
// margin: 0;
596
// padding: 0;
597
// opacity: 0.25;
598
}
599
popover list row:selected button,
601
popover list row:selected button:hover {
602
// color: @theme_selected_fg_color;
603
}
604
popover list row button:hover {
606
// opacity: 1;
607
}
608
//
610
// Tweaks for the editortweak popover in the editor.
611
//
612
editortweak button {
613
// padding: 0 6px 0 6px;
614
}
615
editortweak list row {
617
// padding: 0;
618
}
619
//
621
// Keep search bar and layouttab height in sync.
622
//
623
docktabstrip {
624
min-height: 39px;
625
}
626
layouttabbar > box {
628
// min-height: 39px;
629
}
630
eggsearchbar > revealer > box {
632
// min-height: 39px;
633
}
634
eggsearchbar entry {
636
// min-height: 24px;
637
}
638
//
640
// Pillbox is used to render "languages" in the greeter.
641
//
642
pillbox {
643
// border-radius: 3px;
644
}
645
//
647
// Styling in the genesis (create project) perspective.
648
//
649
genesisperspective stack > box:first-child list row {
650
// padding: 10px;
651
// border-bottom: 1px solid alpha(@borders, 0.2);
652
}
653
genesisperspective stack > box:first-child list row:last-child {
655
// border-bottom: none;
656
}
657
//
659
// Greeter tweaks
660
//
661
// The following tweaks the greeter perspective by adding
662
// separator lines to the list box.
663
//
664
greeter list row {
665
// border-bottom: 1px solid alpha(@borders, 0.2);
666
}
667
greeter list row:last-child {
669
// border-bottom: none;
670
}
671
greeter frame border {
673
// border-color: alpha(@borders, 0.6);
674
}
675
//
677
// Global search results styling
678
//
679
// The following tweaks the sizing of listbox rows in the
680
// global search results to have a bit more padding and
681
// row separators after each line. Additionally, we tweak
682
// the selection color to ensure it has priority.
683
//
684
omnisearchdisplay omnisearchgroup omnisearchrow {
685
// background: transparent;
686
// padding: 9px 12px 9px 12px;
687
// border-bottom: 1px solid alpha(@borders, 0.2);
688
}
689
omnisearchdisplay omnisearchgroup omnisearchrow:last-child {
691
// border-bottom: none;
692
}
693
omnisearchdisplay omnisearchgroup omnisearchrow:selected {
695
// background-color: @theme_selected_bg_color;
696
// color: @theme_selected_fg_color;
697
}
698
//
700
// Preferences styling
701
//
702
// The following tweaks our preferences styling in the
703
// preferences perspective, including groups, rows,
704
// sidebar, etc.
705
//
706
workbench preferences stacksidebar list {
707
// border-right: 1px solid alpha(@borders, 0.4);
708
// background-color: @theme_base_color;
709
}
710
workbench preferences preferencesgroup list row {
712
// padding: 10px;
713
// border-bottom: 1px solid alpha(@borders, 0.2);
714
}
715
workbench preferences preferencesgroup list row:last-child {
717
// border-bottom: none;
718
}
719
workbench preferences preferencesgroup list entry {
721
// background: none;
722
// min-height: 0px;
723
padding-top: 8px;
724
padding-bottom: 8px;
725
}
726
//
728
// Perspectives switcher
729
//
730
// The following tweaks the left-most sidebar containing
731
// the list of perspectives.
732
//
733
perspectiveswitcher {
734
// border-right: 1px solid alpha(@borders, 0.5);
735
}
736
perspectiveswitcher button {
738
// background: transparent;
739
// border-radius: 0;
740
// border: none;
741
// box-shadow: none;
742
// padding: 6px;
743
}
744
// Workaround Adwaita adding borders we don't want
746
textview border.left {
747
// background: none;
748
}
749
treeview.dim-label {
751
// color: alpha(currentColor, 0.5);
752
}
753
/***********
756
* Firefox *
757
***********/
758
menubar {
759
color: $secondary_selected_fg_color;
760
&:hover { color: $selected_fg_color; }
762
}
763
separator { color: $borders_color; }
765
/* FIXME: not working */
767
window.background > widget > check,
768
window.background > widget > radio {
769
margin: 0;
770
padding: 0;
771
}
772
window.background > widget > radio:checked {
774
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
775
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
776
border-image: none;
777
}
778
/***********
781
* Synapse *
782
***********/
783
box > widget > widget:selected { background-color: $selected_bg_color; }
784