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

 _apps.scss

View raw Download
text/plain • 13.66 kiB
ASCII text
        
            
1
// floating status bar
2
.floating-bar {
3
@extend %osd;
4
5
// @extend .toolbar.osd;
6
7
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
17
&.left {
18
margin-right: 8px - 1px;
19
border-left-style: none;
20
border-top-left-radius: 0;
21
}
22
23
&.right {
24
margin-left: 8px - 1px;
25
border-right-style: none;
26
border-top-right-radius: 0;
27
}
28
29
button {
30
min-height: 24px;
31
min-width: 24px;
32
margin: 4px;
33
padding: 0;
34
}
35
}
36
37
38
/************
39
* Nautilus *
40
************/
41
// based css:
42
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css
43
// hard-coded css:
44
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css
45
.nautilus-window,
46
.nautilus-window notebook,
47
.nautilus-window notebook > stack {
48
background: $base_color;
49
}
50
51
.nautilus-canvas-item {
52
// border-radius: 2px;
53
}
54
55
.nautilus-canvas-item.dim-label,
56
.nautilus-list-dim-label {
57
// @extend .dim-label;
58
}
59
60
.nautilus-canvas-item.dim-label:selected,
61
.nautilus-list-dim-label:selected {
62
}
63
64
.nautilus-desktop.nautilus-canvas-item {
65
// background-color: scale-alpha(#000000, $lower_opacity);
66
color: $inversed_fg_color;
67
text-shadow: $z-depth-1;
68
}
69
70
.nautilus-desktop.nautilus-canvas-item:selected {
71
// color: $inversed_fg_color;
72
text-shadow: none;
73
}
74
75
// Toolbar
76
@keyframes needs_attention_keyframes {
77
0% {background-color: transparent; }
78
50% {background-color: $track_color; }
79
100% {background-color: transparent; }
80
}
81
82
.nautilus-operations-button-needs-attention {
83
color: $accent_color;
84
animation: needs_attention_keyframes 2s $standard_curve;
85
}
86
87
.nautilus-operations-button-needs-attention-multiple {
88
color: $accent_color;
89
animation: needs_attention_keyframes 2s $standard_curve;
90
animation-iteration-count: 2;
91
}
92
93
.disk-space-display {
94
// border-style: solid;
95
// border-width: 2px;
96
}
97
98
.disk-space-display.unknown {
99
background-color: $warning_color;
100
}
101
102
.disk-space-display.used {
103
background-color: $primary_color;
104
}
105
106
.disk-space-display.free {
107
background-color: $track_color;
108
color: $disabled_fg_color;
109
}
110
111
// View
112
.nautilus-list-view .view {
113
// border-bottom: 1px solid $borders_color;
114
}
115
116
// Hide superfluous treeview drop target indication
117
.nautilus-list-view .view.dnd {
118
// border-style: none;
119
}
120
121
// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
122
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
123
.documents-entry-tag {
124
// min-height: 24px;
125
margin: 3px -2px 3px 8px;
126
padding: 0 8px;
127
border-radius: $circular_radius;
128
box-shadow: none;
129
background-color: $primary_color;
130
color: $inversed_fg_color;
131
132
&:hover { box-shadow: $z-depth-1; }
133
}
134
135
.documents-entry-tag.button {
136
// @extend %simple_flat_button;
137
138
// min-height: 24px;
139
// min-width: 24px;
140
margin: 0 -2px;
141
padding: 4px;
142
border-radius: $circular_radius;
143
box-shadow: none;
144
color: $secondary_inversed_fg_color;
145
146
&:hover, &:active { color: $inversed_fg_color; }
147
}
148
149
// Workaround for the double border of the searchbar since we use a revealer which
150
// always allocates at least 1 pixel
151
.nautilus-window searchbar { border-top: 1px solid $borders_color; }
152
153
.nautilus-window .searchbar-container { margin-top: -1px; }
154
155
156
/*********
157
* gedit *
158
*********/
159
// based css:
160
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit.adwaita.css
161
// hard-coded css:
162
// https://git.gnome.org/browse/gedit/tree/gedit/resources/css/gedit-style.css
163
.open-document-selector-treeview:hover {
164
}
165
166
.open-document-selector-treeview:selected:hover {
167
}
168
169
/* Only normal state is handle */
170
.open-document-selector-name-label {
171
font-weight: bold;
172
}
173
174
/* Only normal state is handle */
175
.open-document-selector-path-label {
176
color: gtkalpha(currentColor, $hint_opacity);
177
font-size: smaller;
178
179
// @extend .dim-label;
180
}
181
182
.gedit-document-panel {
183
background-color: $lighter_bg_color;
184
}
185
186
.gedit-document-panel row:selected {
187
}
188
189
.gedit-document-panel-group-row,
190
.gedit-document-panel-group-row:hover {
191
border-top: 1px solid gtkalpha(currentColor, 0.3);
192
}
193
194
.gedit-document-panel-group-row:first-child,
195
.gedit-document-panel-group-row:first-child:hover {
196
border-top: 0px;
197
}
198
199
/* Try to look as the notebook tab close button */
200
.gedit-document-panel row button.flat {
201
margin-top: 8px;
202
margin-bottom: 8px;
203
204
@extend %small_button;
205
}
206
207
.gedit-side-panel-paned statusbar {
208
border-top: 1px solid $borders_color;
209
}
210
211
.gedit-search-slider {
212
margin: 4px 4px 8px;
213
214
.gedit-search-entry-occurrences-tag {
215
all: unset;
216
padding: 0 4px;
217
color: gtkalpha(currentColor, $hint_opacity);
218
}
219
220
entry {
221
&:dir(ltr) {
222
margin-right: -$medium_size * 2;
223
padding-right: $medium_size * 2 + 8px;
224
225
.gedit-search-entry-occurrences-tag { margin-right: -8px; }
226
}
227
228
&:dir(rtl) {
229
margin-left: -$medium_size * 2;
230
padding-left: $medium_size * 2 + 8px;
231
232
.gedit-search-entry-occurrences-tag { margin-left: -8px; }
233
}
234
235
&.error ~ button {
236
color: $secondary_inversed_fg_color;
237
238
&:hover, &:active { color: $inversed_fg_color; }
239
240
&:disabled { color: $disabled_secondary_inversed_fg_color; }
241
}
242
}
243
244
button {
245
@extend %simple_flat_button;
246
247
&:dir(ltr),
248
&:dir(rtl) { @extend %linked; }
249
}
250
}
251
252
// Yeah this is ugly
253
.gedit-search-slider .linked:not(.vertical) > entry,
254
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
255
border-radius: 2px;
256
}
257
258
259
/**************
260
* Tweak Tool *
261
**************/
262
// hard-coded css:
263
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css
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
270
// hide separators
271
separator {
272
min-width: 0;
273
min-height: 0;
274
background: transparent;
275
}
276
}
277
278
.tweak {
279
padding: 3px;
280
// padding-top: 3px;
281
282
&.title:hover { box-shadow: none; }
283
}
284
285
.tweak-group-white,
286
.tweak-white,
287
.tweak-white:hover {
288
// background-color: white;
289
background-image: image($base_color);
290
}
291
292
.tweak-startup,
293
.tweak-startup:hover {
294
// background-color: lighter(shade(@theme_bg_color, 0.9));
295
background-image: image($base_color);
296
}
297
298
.tweak-group-startup {
299
// background-color: @view_separators;
300
background-image: image($base_color);
301
border: 1px solid $borders_color;
302
}
303
304
305
/***********
306
* Builder *
307
***********/
308
// based css:
309
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
310
// hard-coded css:
311
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css
312
//
313
// Titlebar adjustments for workbench
314
//
315
// This is needed due to our placement of headerbar inside of a
316
// stack. We were seeing black edges around the header bar, and
317
// improper radius on the headerbar.
318
//
319
workbench stack.titlebar {
320
padding: 0;
321
// box-shadow: none;
322
}
323
324
workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
325
border-radius: 2px 2px 0 0;
326
// box-shadow: none;
327
}
328
329
perspectiveswitcher {
330
background-color: $bg_color;
331
}
332
333
perspectiveswitcher button {
334
}
335
336
perspectiveswitcher button:hover {
337
}
338
339
perspectiveswitcher button:checked {
340
color: $primary_color;
341
}
342
343
//
344
// Layout tab and tab bar tweaks
345
//
346
// The following makes the layout stack header look similar to a tab bar.
347
//
348
layouttabbar {
349
border-bottom: 1px solid $borders_color;
350
background-color: $bg_color;
351
}
352
353
layouttabbar button { @extend %flat_button; }
354
355
layouttabbar > box > button {
356
margin: (40px - $medium_size) / 2 0;
357
// border-radius: 0;
358
}
359
360
layouttab {
361
margin: 0 8px; // not working
362
border-style: none solid;
363
border-width: 1px;
364
border-color: $borders_color;
365
box-shadow: inset 0 -2px $primary_color;
366
background-color: $base_color;
367
}
368
369
layouttab separator.vertical {
370
margin: 8px 4px;
371
}
372
373
layouttab button {
374
&.text-button, &.image-button, & {
375
margin-top: 8px;
376
margin-bottom: 8px;
377
padding: 0 4px;
378
}
379
}
380
381
//
382
// Close button styling for layouttab.
383
//
384
layouttab > box > button.close {
385
border-radius: $circular_radius;
386
}
387
388
layout {
389
border: 1px solid $borders_color;
390
-PnlDockBin-handle-size: 1;
391
}
392
393
entry.search-missing {
394
background-color: $error_color;
395
color: $inversed_fg_color;
396
}
397
398
// tweak icons for treeviews
399
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
400
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }
401
402
dockbin {
403
border: 1px solid $borders_color;
404
-PnlDockBin-handle-size: 1;
405
}
406
407
dockpaned {
408
border: 1px solid $borders_color;
409
}
410
411
eggsearchbar box.search-bar {
412
padding: 0 8px;
413
border-bottom: 1px solid $borders_color;
414
background-color: $bg_color;
415
}
416
417
docktabstrip {
418
padding: 0 8px;
419
border-bottom: 1px solid $borders_color;
420
background-color: $bg_color;
421
}
422
423
docktab {
424
transition: $longer_transition;
425
min-height: $small_size;
426
min-width: $small_size;
427
margin-bottom: -1px;
428
padding: $container_padding 6px;
429
430
outline-offset: -6px;
431
432
border-width: 1px; // for reorderable tabs
433
border-color: transparent; //
434
435
color: $secondary_fg_color;
436
font-weight: 500;
437
438
&:hover {
439
box-shadow: inset 0 -2px $track_color;
440
color: $fg_color;
441
}
442
443
&:checked {
444
animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
445
box-shadow: inset 0 -2px $primary_color;
446
color: $fg_color;
447
}
448
}
449
450
dockoverlayedge {
451
background-color: $bg_color;
452
}
453
454
dockoverlayedge docktabstrip {
455
padding: 0;
456
border: none;
457
}
458
459
dockoverlayedge.left-edge docktab:checked {
460
border-right-color: $primary_color;
461
border-bottom-color: transparent;
462
}
463
464
dockoverlayedge.right-edge docktab:checked {
465
border-left-color: $primary_color;
466
border-bottom-color: transparent;
467
}
468
469
pillbox {
470
background-color: $bg_color;
471
border-radius: 2px;
472
}
473
474
layoutpane entry.search {
475
@extend %entry.flat;
476
477
box-shadow: inset 0 -1px $borders_color;
478
background-color: $base_color;
479
}
480
481
editortweak entry.search {
482
@extend %entry.flat;
483
484
margin-bottom: -1px;
485
box-shadow: none;
486
}
487
488
// styling for editor search
489
frame.gb-search-frame {
490
// border-bottom-left-radius: 5px;
491
border-bottom-right-radius: 5px;
492
}
493
494
.gb-search-entry-occurrences-tag {
495
box-shadow: none;
496
background-color: transparent;
497
}
498
499
//
500
// Keep search bar and layouttab height in sync.
501
//
502
docktabstrip {
503
min-height: 39px;
504
}
505
506
layouttabbar > box {
507
// min-height: 39px;
508
}
509
510
eggsearchbar > revealer > box {
511
// min-height: 39px;
512
}
513
514
eggsearchbar entry {
515
// min-height: 24px;
516
}
517
518
workbench preferences preferencesgroup list entry {
519
// background: none;
520
// min-height: 0px;
521
padding-top: 8px;
522
padding-bottom: 8px;
523
}
524
525
526
/***********
527
* Firefox *
528
***********/
529
menubar {
530
color: $secondary_inversed_fg_color;
531
532
&:hover { color: $inversed_fg_color; }
533
}
534
535
separator { color: $borders_color; }
536
537
/* FIXME: not working */
538
window.background > widget > check,
539
window.background > widget > radio {
540
margin: 0;
541
padding: 0;
542
}
543
544
window.background > widget > radio:checked {
545
-gtk-icon-source: image(-gtk-recolor(url("assets/radio-checked-symbolic.svg")),
546
-gtk-recolor(url("assets/radio-checked-symbolic.png")));
547
border-image: none;
548
}
549
550
551
/***********
552
* Synapse *
553
***********/
554
box > widget > widget:selected { background-color: $primary_color; }
555
556
557
/*********
558
* Unity *
559
*********/
560
// based css:
561
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css
562
// Decorations
563
UnityDecoration {
564
-UnityDecoration-extents: 28px 0 0 0;
565
-UnityDecoration-input-extents: 8px;
566
567
-UnityDecoration-shadow-offset-x: 0;
568
-UnityDecoration-shadow-offset-y: 3px;
569
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
570
-UnityDecoration-active-shadow-radius: 18px;
571
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
572
-UnityDecoration-inactive-shadow-radius: 6px;
573
574
-UnityDecoration-glow-size: 8px;
575
-UnityDecoration-glow-color: $primary_color;
576
577
-UnityDecoration-title-indent: 4px;
578
-UnityDecoration-title-fade: 32px;
579
-UnityDecoration-title-alignment: 0.0;
580
}
581
582
UnityDecoration.top {
583
padding: 0 2px;
584
border-style: none;
585
border-radius: 2px 2px 0 0;
586
// box-shadow: inset 0 1px $secondary_highlight_color;
587
box-shadow: inset 0 1px scale-alpha(#FFFFFF, 0.1);
588
background-color: $secondary_titlebar_color;
589
color: $inversed_fg_color;
590
}
591
592
UnityDecoration.top:backdrop {
593
color: $secondary_inversed_fg_color;
594
}
595
596
UnityDecoration.left,
597
UnityDecoration.right {
598
}
599
600
UnityDecoration.bottom {
601
}
602
603
UnityDecoration.menuitem,
604
UnityDecoration .menuitem {
605
color: gtkalpha(currentColor, $enabled_opacity);
606
}
607
608
UnityDecoration.menubar.menuitem:hover,
609
UnityDecoration.menubar .menuitem *:hover {
610
box-shadow: inset 0 -2px currentColor;
611
background-color: transparent;
612
color: currentColor;
613
}
614
615
.background:not(.csd) headerbar:not(.titlebar) {
616
border-radius: 0;
617
box-shadow: none;
618
619
&.inline-toolbar { border-style: none; }
620
}
621
622
SheetStyleDialog.unity-force-quit {
623
// background-color: $bg_color;
624
}
625
626
// Panel Style
627
UnityPanelWidget,
628
.unity-panel {
629
background-color: $topbar_color;
630
background-image: image($topbar_color);
631
color: $inversed_fg_color;
632
}
633
634
UnityPanelWidget:backdrop,
635
.unity-panel:backdrop {
636
color: $secondary_inversed_fg_color;
637
}
638
639
.unity-panel.menubar,
640
.unity-panel .menubar {
641
}
642
643
.unity-panel.menuitem,
644
.unity-panel .menuitem {
645
color: gtkalpha(currentColor, $enabled_opacity);
646
}
647
648
.unity-panel.menubar.menuitem:hover,
649
.unity-panel.menubar .menuitem *:hover {
650
box-shadow: inset 0 -2px currentColor;
651
background-color: transparent;
652
color: currentColor;
653
}
654
655
@keyframes playbackmenuitem_spinner {
656
to { -gtk-icon-transform: rotate(1turn); }
657
}
658
659
.menu IdoPlaybackMenuItem.menuitem:active {
660
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
661
animation: playbackmenuitem_spinner 1s infinite linear;
662
color: $primary_color;
663
}
664
665