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: $longer_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: $inversed_fg_color;
69
text-shadow: $z-depth-1;
70
}
71
.nautilus-desktop.nautilus-canvas-item:selected {
73
// color: $inversed_fg_color;
74
text-shadow: none;
75
}
76
.nautilus-circular-button {
78
@extend %circular_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_color;
90
animation: needs_attention_keyframes 2s $standard_curve;
91
}
92
.nautilus-operations-button-needs-attention-multiple {
94
color: $accent_color;
95
animation: needs_attention_keyframes 2s $standard_curve;
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: $primary_color;
110
}
111
.disk-space-display.free {
113
background-color: $track_color;
114
color: $disabled_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: $circular_radius;
134
box-shadow: none;
135
background-color: $primary_color;
136
color: $inversed_fg_color;
137
&:hover { box-shadow: $z-depth-1; }
139
}
140
.documents-entry-tag.button {
142
// @extend %simple_flat_button;
143
// min-height: 24px;
145
// min-width: 24px;
146
margin: 0 -2px;
147
padding: 4px;
148
border-radius: $circular_radius;
149
box-shadow: none;
150
color: $secondary_inversed_fg_color;
151
&:hover, &:active { color: $inversed_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: $lighter_bg_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
margin-top: 8px;
204
margin-bottom: 8px;
205
@extend %small_button;
207
}
208
.gedit-side-panel-paned statusbar {
210
border-top: 1px solid $borders_color;
211
}
212
.gedit-search-slider {
214
margin: 4px 4px 8px;
215
.gedit-search-entry-occurrences-tag {
217
all: unset;
218
padding: 0 4px;
219
color: gtkalpha(currentColor, $hint_opacity);
220
}
221
entry {
223
&:dir(ltr) {
224
margin-right: -$medium_size * 2;
225
padding-right: $medium_size * 2 + 8px;
226
.gedit-search-entry-occurrences-tag { margin-right: -8px; }
228
}
229
&:dir(rtl) {
231
margin-left: -$medium_size * 2;
232
padding-left: $medium_size * 2 + 8px;
233
.gedit-search-entry-occurrences-tag { margin-left: -8px; }
235
}
236
&.error ~ button {
238
color: $secondary_inversed_fg_color;
239
&:hover, &:active { color: $inversed_fg_color; }
241
&:disabled { color: $disabled_secondary_inversed_fg_color; }
243
}
244
}
245
button {
247
@extend %simple_flat_button;
248
&:dir(ltr),
250
&:dir(rtl) { @extend %linked; }
251
}
252
}
253
// Yeah this is ugly
255
.gedit-search-slider .linked:not(.vertical) > entry,
256
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
257
border-radius: 2px;
258
}
259
/**************
262
* Tweak Tool *
263
**************/
264
// the sidebar
265
.tweak-categories {
266
// padding: 4px 0;
267
// background-color: shade(@theme_bg_color, 0.99);
268
background-image: image($lighter_bg_color);
269
// hide separators
271
separator {
272
min-width: 0;
273
min-height: 0;
274
background: transparent;
275
}
276
}
277
.tweak-category {
279
// padding: 10px;
280
}
281
// the container and tweaks in a group
283
.tweak-group {
284
// background-color: rgba(0, 0, 0, 0);
285
}
286
.tweak {
288
padding: 3px;
289
// padding-top: 3px;
290
// background-color: rgba(0, 0, 0, 0);
291
}
292
.tweak:hover {
294
// background-color: rgba(0, 0, 0, 0);
295
}
296
.tweak.title {
298
// padding-top: 10px;
299
&:hover { box-shadow: none; }
301
}
302
.tweak-titlebar-left:dir(ltr),
304
.tweak-titlebar-right:dir(rtl) {
305
// border-top-right-radius: 0;
306
}
307
.tweak-titlebar-right:dir(ltr),
309
.tweak-titlebar-left:dir(rtl) {
310
// border-top-left-radius: 0;
311
}
312
// individual tweak theme changes
314
.tweak.title#title-theme {
315
// padding-top: 3px;
316
}
317
.tweak#hinting,
319
.tweak#text-scaling-factor {
320
// padding-top: 20px;
321
}
322
.tweak-group-white,
324
.tweak-white,
325
.tweak-white:hover {
326
// background-color: white;
327
background-image: image($base_color);
328
}
329
.tweak-startup,
331
.tweak-startup:hover {
332
// background-color: lighter(shade(@theme_bg_color, 0.9));
333
background-image: image($base_color);
334
}
335
.tweak-group-startup {
337
// background-color: @view_separators;
338
background-image: image($base_color);
339
border: 1px solid $borders_color;
340
}
341
// NOT WORKING
343
.main-container {
344
// padding: 20px;
345
}
346
/***********
349
* Builder *
350
***********/
351
//
352
// Titlebar adjustments for workbench
353
//
354
// This is needed due to our placement of headerbar inside of a
355
// stack. We were seeing black edges around the header bar, and
356
// improper radius on the headerbar.
357
//
358
workbench stack.titlebar {
359
padding: 0;
360
// box-shadow: none;
361
}
362
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
364
border-radius: 2px 2px 0 0;
365
// box-shadow: none;
366
}
367
perspectiveswitcher {
369
background-color: $bg_color;
370
}
371
perspectiveswitcher button {
373
}
374
perspectiveswitcher button:hover {
376
}
377
perspectiveswitcher button:checked {
379
color: $primary_color;
380
}
381
//
383
// Layout tab and tab bar tweaks
384
//
385
// The following makes the layout stack header look similar to a tab bar.
386
//
387
layouttabbar {
388
border-bottom: 1px solid $borders_color;
389
background-color: $bg_color;
390
}
391
layouttabbar button { @extend %flat_button; }
393
layouttabbar > box > button {
395
margin: (40px - $medium_size) / 2 0;
396
// border-radius: 0;
397
}
398
layouttab {
400
margin: 0 8px; // not working
401
border-style: none solid;
402
border-width: 1px;
403
border-color: $borders_color;
404
box-shadow: inset 0 -2px $primary_color;
405
background-color: $base_color;
406
}
407
layouttab separator.vertical {
409
margin: 8px 4px;
410
}
411
layouttab button {
413
&.text-button, &.image-button, & {
414
margin-top: 8px;
415
margin-bottom: 8px;
416
padding: 0 4px;
417
}
418
}
419
//
421
// Close button styling for layouttab.
422
//
423
layouttab > box > button.close {
424
border-radius: $circular_radius;
425
}
426
layout {
428
border: 1px solid $borders_color;
429
-PnlDockBin-handle-size: 1;
430
}
431
entry.search-missing {
433
background-color: $error_color;
434
color: $inversed_fg_color;
435
}
436
// tweak icons for treeviews
438
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
439
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }
440
dockbin {
442
border: 1px solid $borders_color;
443
-PnlDockBin-handle-size: 1;
444
}
445
dockpaned {
447
border: 1px solid $borders_color;
448
}
449
eggsearchbar box.search-bar {
451
padding: 0 8px;
452
border-bottom: 1px solid $borders_color;
453
background-color: $bg_color;
454
}
455
docktabstrip {
457
padding: 0 8px;
458
border-bottom: 1px solid $borders_color;
459
background-color: $bg_color;
460
}
461
docktab {
463
transition: $longer_transition;
464
min-height: $small_size;
465
min-width: $small_size;
466
margin-bottom: -1px;
467
padding: $container_padding 6px;
468
outline-offset: -6px;
470
border-width: 1px; // for reorderable tabs
472
border-color: transparent; //
473
color: $secondary_fg_color;
475
font-weight: 500;
476
&:hover {
478
box-shadow: inset 0 -2px $track_color;
479
color: $fg_color;
480
}
481
&:checked {
483
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
484
box-shadow: inset 0 -2px $primary_color;
485
color: $fg_color;
486
}
487
}
488
dockoverlayedge {
490
background-color: $bg_color;
491
}
492
dockoverlayedge docktabstrip {
494
padding: 0;
495
border: none;
496
}
497
dockoverlayedge.left-edge docktab:checked {
499
border-right-color: $primary_color;
500
border-bottom-color: transparent;
501
}
502
dockoverlayedge.right-edge docktab:checked {
504
border-left-color: $primary_color;
505
border-bottom-color: transparent;
506
}
507
pillbox {
509
background-color: $bg_color;
510
border-radius: 2px;
511
}
512
layoutpane entry.search {
514
@extend %entry.flat;
515
box-shadow: inset 0 -1px $borders_color;
517
background-color: $base_color;
518
}
519
editortweak entry.search {
521
@extend %entry.flat;
522
margin-bottom: -1px;
524
box-shadow: none;
525
}
526
// work around some gtk padding issue
528
filechooser actionbar button.combo {
529
// padding: 0;
530
}
531
// styling for editor search
533
frame.gb-search-frame {
534
// background-image: linear-gradient(shade(@theme_bg_color,1.05), @theme_bg_color);
535
// padding: 6px;
536
// border-style: solid;
537
// border-color: @borders;
538
// border-left-width: 1px;
539
// border-right-width: 1px;
540
// border-bottom-width: 1px;
541
// border-bottom-left-radius: 5px;
542
border-bottom-right-radius: 5px;
543
}
544
frame.gb-search-frame border {
546
// border: none;
547
}
548
// styling for NautilusFloatingBar
550
.floating-bar {
551
// padding: 2px;
552
// background-color: @theme_base_color;
553
// border-width: 1px;
554
// border-style: solid solid none;
555
// border-color: @borders;
556
// border-radius: 3px 3px 0 0;
557
}
558
.floating-bar.bottom.left { // axes left border and border radius
560
// border-left-style: none;
561
// border-top-left-radius: 0;
562
}
563
.floating-bar.bottom.right { // axes right border and border radius
565
// border-right-style: none;
566
// border-top-right-radius: 0;
567
}
568
.floating-bar:backdrop {
570
// background-color: @theme_unfocused_base_color;
571
// border-color: @unfocused_borders;
572
}
573
.floating-bar button {
575
// padding: 4px;
576
}
577
.gb-search-entry-occurrences-tag {
579
// color: shade (@theme_unfocused_fg_color, 0.8);
580
// border: 0px;
581
// margin: 2px;
582
// padding: 2px;
583
box-shadow: none;
584
background-color: transparent;
585
}
586
//
588
// For our pattern of popover with lists (and close buttons).
589
//
590
popover list row {
591
// padding: 6px;
592
}
593
popover list row button {
595
// background: transparent;
596
// border: none;
597
// box-shadow: none;
598
// margin: 0;
599
// padding: 0;
600
// opacity: 0.25;
601
}
602
popover list row:selected button,
604
popover list row:selected button:hover {
605
// color: @theme_selected_fg_color;
606
}
607
popover list row button:hover {
609
// opacity: 1;
610
}
611
//
613
// Tweaks for the editortweak popover in the editor.
614
//
615
editortweak button {
616
// padding: 0 6px 0 6px;
617
}
618
editortweak list row {
620
// padding: 0;
621
}
622
//
624
// Keep search bar and layouttab height in sync.
625
//
626
docktabstrip {
627
min-height: 39px;
628
}
629
layouttabbar > box {
631
// min-height: 39px;
632
}
633
eggsearchbar > revealer > box {
635
// min-height: 39px;
636
}
637
eggsearchbar entry {
639
// min-height: 24px;
640
}
641
//
643
// Pillbox is used to render "languages" in the greeter.
644
//
645
pillbox {
646
// border-radius: 3px;
647
}
648
//
650
// Styling in the genesis (create project) perspective.
651
//
652
genesisperspective stack > box:first-child list row {
653
// padding: 10px;
654
// border-bottom: 1px solid alpha(@borders, 0.2);
655
}
656
genesisperspective stack > box:first-child list row:last-child {
658
// border-bottom: none;
659
}
660
//
662
// Greeter tweaks
663
//
664
// The following tweaks the greeter perspective by adding
665
// separator lines to the list box.
666
//
667
greeter list row {
668
// border-bottom: 1px solid alpha(@borders, 0.2);
669
}
670
greeter list row:last-child {
672
// border-bottom: none;
673
}
674
greeter frame border {
676
// border-color: alpha(@borders, 0.6);
677
}
678
//
680
// Global search results styling
681
//
682
// The following tweaks the sizing of listbox rows in the
683
// global search results to have a bit more padding and
684
// row separators after each line. Additionally, we tweak
685
// the selection color to ensure it has priority.
686
//
687
omnisearchdisplay omnisearchgroup omnisearchrow {
688
// background: transparent;
689
// padding: 9px 12px 9px 12px;
690
// border-bottom: 1px solid alpha(@borders, 0.2);
691
}
692
omnisearchdisplay omnisearchgroup omnisearchrow:last-child {
694
// border-bottom: none;
695
}
696
omnisearchdisplay omnisearchgroup omnisearchrow:selected {
698
// background-color: @theme_selected_bg_color;
699
// color: @theme_selected_fg_color;
700
}
701
//
703
// Preferences styling
704
//
705
// The following tweaks our preferences styling in the
706
// preferences perspective, including groups, rows,
707
// sidebar, etc.
708
//
709
workbench preferences stacksidebar list {
710
// border-right: 1px solid alpha(@borders, 0.4);
711
// background-color: @theme_base_color;
712
}
713
workbench preferences preferencesgroup list row {
715
// padding: 10px;
716
// border-bottom: 1px solid alpha(@borders, 0.2);
717
}
718
workbench preferences preferencesgroup list row:last-child {
720
// border-bottom: none;
721
}
722
workbench preferences preferencesgroup list entry {
724
// background: none;
725
// min-height: 0px;
726
padding-top: 8px;
727
padding-bottom: 8px;
728
}
729
//
731
// Perspectives switcher
732
//
733
// The following tweaks the left-most sidebar containing
734
// the list of perspectives.
735
//
736
perspectiveswitcher {
737
// border-right: 1px solid alpha(@borders, 0.5);
738
}
739
perspectiveswitcher button {
741
// background: transparent;
742
// border-radius: 0;
743
// border: none;
744
// box-shadow: none;
745
// padding: 6px;
746
}
747
// Workaround Adwaita adding borders we don't want
749
textview border.left {
750
// background: none;
751
}
752
treeview.dim-label {
754
// color: alpha(currentColor, 0.5);
755
}
756
/***********
759
* Firefox *
760
***********/
761
menubar {
762
color: $secondary_inversed_fg_color;
763
&:hover { color: $inversed_fg_color; }
765
}
766
separator { color: $borders_color; }
768
/* FIXME: not working */
770
window.background > widget > check,
771
window.background > widget > radio {
772
margin: 0;
773
padding: 0;
774
}
775
window.background > widget > radio:checked {
777
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
778
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
779
border-image: none;
780
}
781
/***********
784
* Synapse *
785
***********/
786
box > widget > widget:selected { background-color: $primary_color; }
787
/*********
790
* Unity *
791
*********/
792
// Decorations
793
UnityDecoration {
794
-UnityDecoration-extents: 32px 0 0 0;
795
-UnityDecoration-input-extents: 8px;
796
-UnityDecoration-shadow-offset-x: 0;
798
-UnityDecoration-shadow-offset-y: 3px;
799
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
800
-UnityDecoration-active-shadow-radius: 18px;
801
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
802
-UnityDecoration-inactive-shadow-radius: 6px;
803
-UnityDecoration-glow-size: 8px;
805
-UnityDecoration-glow-color: $primary_color;
806
-UnityDecoration-title-indent: 4px;
808
-UnityDecoration-title-fade: 32px;
809
-UnityDecoration-title-alignment: 0.0;
810
}
811
UnityDecoration.top {
813
padding: 0 4px;
814
border-style: none;
815
border-radius: 2px 2px 0 0;
816
box-shadow: inset 0 1px $secondary_highlight_color;
817
background-color: $headerbar_color;
818
// color: $inversed_fg_color;
819
}
820
UnityDecoration.top:backdrop {
822
// color: $secondary_inversed_fg_color;
823
}
824
UnityDecoration.left,
826
UnityDecoration.right {
827
}
828
UnityDecoration.bottom {
830
}
831
UnityDecoration.menubar.menuitem:hover,
833
UnityDecoration.menubar .menuitem *:hover {
834
box-shadow: inset 0 -2px $primary_color;
835
background-color: transparent;
836
}
837
.background:not(.csd) .header-bar {
839
border-radius: 0;
840
box-shadow: none;
841
}
842
SheetStyleDialog.unity-force-quit {
844
// background-color: $bg_color;
845
}
846
// Panel Style
848
UnityPanelWidget,
849
.unity-panel {
850
background-color: $headerbar_color;
851
background-image: image($headerbar_color);
852
// color: $inversed_fg_color;
853
}
854
UnityPanelWidget:backdrop,
856
.unity-panel:backdrop {
857
// color: $secondary_inversed_fg_color;
858
}
859
.unity-panel.menubar,
861
.unity-panel .menubar {
862
}
863
.unity-panel.menuitem,
865
.unity-panel .menuitem {
866
}
867
.unity-panel.menubar.menuitem:hover,
869
.unity-panel.menubar .menuitem *:hover {
870
box-shadow: inset 0 -2px $primary_color;
871
background-color: transparent;
872
}
873
@keyframes playbackmenuitem_spinner {
875
to { -gtk-icon-transform: rotate(1turn); }
876
}
877
.menu IdoPlaybackMenuItem.menuitem:active {
879
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
880
animation: playbackmenuitem_spinner 1s infinite linear;
881
color: $primary_color;
882
}
883