themes/whitey/gtk-3.0/_3rd-party.scss (view raw)
1/******************
2 * Budgie Desktop *
3 ******************/
4
5// specific ripple-effect for IconTaskList
6@keyframes budgie_ripple_effect {
7 from {
8 background-image: -gtk-gradient(radial,
9 center center, 0,
10 center center, 0.001,
11 to(gtkalpha($inverted_fg_color, 0.2)),
12 to(transparent)),
13 linear-gradient(to bottom,
14 gtkalpha($inverted_fg_color, 0.2));
15 }
16 to {
17 background-image: -gtk-gradient(radial,
18 center center, 0,
19 center center, 0.4,
20 to(gtkalpha($inverted_fg_color, 0.2)),
21 to(transparent)),
22 linear-gradient(to bottom,
23 gtkalpha($inverted_fg_color, 0.2));
24 }
25}
26
27// orientation
28$orientation: ((top, bottom),
29 (bottom, top),
30 (left, right),
31 (right, left));
32
33// main container
34.budgie-container { background-color: transparent; }
35
36// panel styling
37.budgie-panel {
38 // always use dark-color of dark variant
39 background-color: $panel_bg_color;
40 color: $inverted_fg_color;
41 font-weight: 700;
42
43 // panel border styling
44 @each $along_side, $opp_side in $orientation {
45 .#{$along_side} & { border-#{$along_side}: 2px solid $panel_bg_color; }
46 }
47
48 // used to indicate unread notifications
49 .alert { color: $accent_color; }
50}
51
52@each $along_side, $opp_side in $orientation {
53 // panel shadow styling
54 .#{$along_side} .shadow-block {
55 background-color: transparent;
56 background-image: linear-gradient(to $opp_side,
57 gtkalpha(#000000, 0.23),
58 gtkalpha(#000000, 0.08),
59 transparent);
60 }
61
62 // raven border styling
63 .#{$along_side} .raven-frame {
64 padding: 0;
65 border: none;
66 border-#{$opp_side}: 1px solid $borders_color;
67 background: none;
68 }
69}
70
71// wnck tasklist styling
72.budgie-panel WnckTasklist {
73 .button,
74 .button:backdrop {
75 border: none;
76 background: none;
77 opacity: 0.5;
78 &:hover,
79 &:active,
80 &:checked { opacity: 1.0; }
81 }
82}
83
84// icon tasklist styling
85.budgie-panel {
86 .launcher {
87 border: 2px solid transparent;
88 background-image: -gtk-gradient(radial,
89 center center, 0,
90 center center, 0.4,
91 to(gtkalpha($inverted_fg_color, 0)),
92 to(transparent)),
93 linear-gradient(to bottom,
94 gtkalpha($inverted_fg_color, 0));
95 background-size: 3em * 2 / 0.8 3em * 2 / 0.8, auto;
96 background-position: center center;
97 opacity: 0.5;
98 transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
99 transition-property: opacity,
100 border-color,
101 background-color,
102 background-image,
103 box-shadow;
104 transition-duration: 0.2s;
105 &:hover {
106 opacity: 0.75;
107 -gtk-image-effect: highlight;
108 }
109 &:active {
110 opacity: 1.0;
111 transition-duration: 0;
112 animation: budgie_ripple_effect 0.2s
113 cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
114 }
115 &:checked {
116 opacity: 1.0;
117 &:hover { -gtk-image-effect: highlight; }
118 }
119 }
120
121 .unpinned .launcher,
122 .pinned .launcher.running {
123 opacity: 1.0;
124 &:hover { -gtk-image-effect: highlight; }
125 }
126}
127
128// draw underscores
129@each $along_side, $opp_side in $orientation {
130 .#{$along_side} .budgie-panel {
131 WnckTasklist .button {
132 border: 2px solid transparent;
133 &:hover {
134 border-#{$along_side}: 2px solid gtkalpha($inverted_fg_color, 0.4);
135 }
136 &:active,
137 &:checked {
138 border-#{$along_side}: 2px solid $selected_bg_color;
139 }
140 }
141
142 .launcher {
143 border: 2px solid transparent;
144 &:hover {
145 border-#{$along_side}: 2px solid gtkalpha($inverted_fg_color, 0.4);
146 }
147 &:active,
148 &:checked {
149 border-#{$along_side}: 2px solid $selected_bg_color;
150 }
151 }
152 }
153}
154
155// draw underscores and dots
156@each $along_side, $_dot in (top, top),
157 (bottom, bottom),
158 (left, left),
159 (right, right) {
160 .#{$along_side} .budgie-panel {
161 .unpinned .launcher,
162 .pinned .launcher.running {
163 border: 2px solid transparent;
164 border-image: -gtk-scaled(url("assets/running-dot-#{$_dot}.png"),
165 url("assets/running-dot-#{$_dot}@2.png"))
166 2 / 2px;
167 &:hover,
168 &:active,
169 &:checked {
170 border-#{$along_side}: 2px solid $selected_bg_color;
171 border-image: none;
172 }
173 }
174 }
175}
176
177// show-desktop styling
178.budgie-panel ShowDesktopApplet {
179 > .button.flat {
180 padding: 0.4em 1em;
181 border-radius: 0;
182 outline-color: transparent;
183 color: $inverted_fg_color;
184 &:hover {
185 color: $selected_fg_color;
186 background-color: transparent;
187 background-image: none;
188 }
189 &:active { color: $selected_fg_color; }
190 &:checked { // dim icon when checked
191 color: $insensitive_inverted_fg_color;
192 background-color: transparent;
193 background-image: none;
194 &:hover {
195 color: $selected_fg_color;
196 background-color: transparent;
197 background-image: none;
198 }
199 }
200 }
201}
202
203// main menu styling
204.budgie-menu {
205 border-radius: 2px;
206 background-color: $secondary_base_color;
207
208 GtkScrolledWindow,
209 .list,
210 .list-row,
211 .scrollbar.trough { // reset styling
212 border: none;
213 background: none;
214 box-shadow: none;
215 }
216
217 .list-row { // reset background
218 &, &.activatable {
219 background-image: none;
220 background-color: $secondary_base_color;
221 color: $secondary_fg_color;
222 transition: none;
223 }
224 &:hover,
225 &.activatable:hover {
226 background-image: none;
227 background-color: $secondary_base_color;
228 color: $fg_color;
229 transition: none;
230 }
231 }
232
233 GtkScrolledWindow .undershoot {
234 &.top { @include undershoot(top, $secondary_base_color); }
235 &.bottom { @include undershoot(bottom, $secondary_base_color); }
236 &.left { @include undershoot(left, $secondary_base_color); }
237 &.right { @include undershoot(right, $secondary_base_color); }
238 }
239}
240
241// raven styling
242.raven {
243 padding: 0;
244 border: none;
245 color: $secondary_fg_color;
246 background-color: gtkopacity($dark_color, 0.9);
247
248 // mixin with drop-shadows to avoid the raven edge shine-through
249 &:dir(ltr) { box-shadow: -1px 0 1px rgba(0, 0, 0, 0.12); }
250 &:dir(rtl) { box-shadow: 1px 0 1px rgba(0, 0, 0, 0.12); }
251
252 .raven-header {
253 border: none;
254 color: $tertiary_fg_color;
255 background-color: transparent;
256 font-weight: 700;
257 }
258
259 .raven-background {
260 border-width: 1px 0 0;
261 border-style: solid none none;
262 border-color: $borders_color;
263 background-color: transparent;
264 box-shadow: if($variant == 'light', $inline-shadow-light,
265 $inline-shadow-dark);
266 }
267
268 .powerstrip { // always use dark variant
269 border-top: 1px solid $borders_color;
270 background-color: $inverted_dark_color;
271 box-shadow: if($variant == 'light', $inline-shadow-light,
272 $inline-shadow-dark);
273
274 .button {
275 padding: 1em;
276 color: $secondary_accent_color;
277 &:hover,
278 &:active,
279 &:checked { color: $accent_color; }
280 &:insensitive { color: gtkopacity($accent_color, 0.4); }
281 }
282 }
283
284 .option-subtitle {
285 color: $insensitive_secondary_fg_color;
286 font-size: 90%;
287 }
288
289 GtkScrolledWindow { background: transparent; }
290
291 .list,
292 .list-row,
293 .list-row.activatable {
294 background-color: transparent;
295 &:not(.list):hover { color: $fg_color; }
296 &:not(.list):selected {
297 color: $selected_bg_color;
298 &:hover { background-color: gtkopacity($selected_bg_color, 0.1); }
299 }
300
301 .separator { color: gtkopacity($insensitive_fg_color, 0.55); }
302 }
303
304 // use flat-style
305 .button.image-button {
306 @include button(flat-normal);
307 &:hover { @include button(flat-hover); }
308 &:active { @include button(flat-active); }
309 &:insensitive { @include button(flat-insensitive); }
310 &:checked { @include button(flat-checked); }
311 &:checked:insensitive { @include button(flat-checked-insensitive); }
312 }
313
314 .raven-header {
315 > .button.text-button { // 'exit' button
316 @extend .button.suggested-action;
317 color: $secondary_selected_fg_color;
318 &:hover { color: $selected_fg_color; }
319 &:active {
320 color: $selected_fg_color;
321 background-color: $selected_bg_color;
322 }
323 }
324
325 .expander-button { // expander arrow buttons
326 padding: 1.0em;
327 border-radius: 100px;
328 outline-radius: 100px;
329 color: $tertiary_fg_color;
330 &:hover,
331 &:active { color: $fg_color; }
332 }
333 }
334
335 GtkCalendar {
336 border: none;
337 background-color: transparent;
338 }
339
340 .undershoot { // remove undershoot
341 &.top,
342 &.bottom,
343 &.left,
344 &.right { background-image: none; }
345 }
346}
347
348// MPRIS applet
349.raven-mpris {
350 border: none;
351 color: $fg_color;
352 background-color: gtkopacity($dark_color, 0.9);
353
354 .button.image-button { padding: 0.6em; }
355}
356
357// notifications
358.budgie-notification-window {
359 border-radius: 2px;
360 background: none;
361}
362
363.budgie-notification {
364 &.background { border-radius: 2px; }
365
366 .notification-title {
367 color: $secondary_fg_color;
368 font-size: 110%;
369 font-weight: 500;
370 }
371
372 .notification-body { color: $fg_color; }
373}
374
375// dialog styling
376.background.csd.budgie-run-dialog {
377 border: none;
378 background-color: transparent;
379
380 .window-frame {
381 border-radius: 2px;
382 border: none;
383 background-color: gtkopacity($inverted_dark_color, 0.9);
384 box-shadow: $z-depth-4;
385 &:backdrop { box-shadow: $z-depth-2; }
386 }
387
388 .separator {
389 -GtkWidget-separator-width: 0;
390 border: 0 none transparent;
391 color: transparent;
392 }
393
394 GtkScrolledWindow {
395 border-image: none; // remove underline indicator
396
397 GtkGrid .button.flat {
398 border-radius: 2px;
399 outline-radius: 2px;
400 }
401
402 .undershoot { // remove undershoot
403 &.top,
404 &.bottom,
405 &.left,
406 &.right { background-image: none; }
407 }
408 }
409
410 // 'close' button
411 .button.flat.image-button {
412 color: $secondary_accent_color;
413 &:hover,
414 &:active,
415 &:checked { color: $accent_color; }
416 &:insensitive { color: gtkopacity($accent_color, 0.4); }
417 }
418}
419
420.budgie-session-dialog {
421 border-radius: 2px;
422 border-width: 0;
423 // always use dark-color of dark variant
424 background-color: $inverted_bg_color;
425 color: $inverted_fg_color;
426 font-weight: 700;
427 opacity: 0.9;
428
429 .button,
430 .linked > .button {
431 @include button(flat-normal);
432 padding: 0.7em 1em 0.8em;
433 border: 2px solid transparent;
434 border-radius: 0;
435 color: $secondary_accent_color;
436 background-color: transparent;
437 background-size: 192px * 1 / 0.8 192px * 1 / 0.8, auto;
438 &:hover {
439 @include button(flat-hover);
440 color: $accent_color;
441 }
442 &:active {
443 @include button(flat-active);
444 color: $accent_color;
445 }
446 &:checked {
447 @include button(flat-checked);
448 color: $secondary_accent_color;
449 }
450 &:insensitive { @include button(flat-insensitive); }
451
452 &:first-child {
453 border-bottom-left-radius: 2px;
454 border-right-width: 0;
455 }
456 &:last-child {
457 border-bottom-right-radius: 2px;
458 border-left-width: 0;
459 }
460 }
461}
462
463.budgie-polkit-dialog {
464 @extend .budgie-session-dialog;
465
466 .message { color: $secondary_fg_color; }
467 .failure {
468 color: $accent_color;
469 font-weight: 700;
470 }
471}
472
473.drop-shadow {
474 background-color: $dark_color;
475 background-image: none;
476 box-shadow: $z-depth-2;
477}
478
479
480/*****************
481 * Unity Desktop *
482 *****************/
483
484// window decorations
485UnityDecoration { // FIXME: do not use scalable units
486 -UnityDecoration-extents: 28px 0 0 0;
487 -UnityDecoration-input-extents: 8px;
488
489 -UnityDecoration-shadow-offset-x: 0;
490 -UnityDecoration-shadow-offset-y: 8px;
491 -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.24);
492 -UnityDecoration-active-shadow-radius: 12px;
493 -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.16);
494 -UnityDecoration-inactive-shadow-radius: 6px;
495
496 -UnityDecoration-glow-size: 10px;
497 -UnityDecoration-glow-color: $selected_bg_color;
498
499 -UnityDecoration-title-indent: 16px;
500 -UnityDecoration-title-fade: 32px;
501 -UnityDecoration-title-alignment: 0.0;
502
503 &.top {
504 border-width: 1px 0 0;
505 border-style: solid none none;
506 border-color: $borders_color;
507 border-radius: 2px 2px 0 0;
508 padding: 1px 6px 0 6px;
509
510 background-image: linear-gradient(to bottom, $inverted_dark_color);
511 // The foreground color will be used to paint the text
512 color: $inverted_fg_color;
513 box-shadow: inset 0 1px $highlight_color;
514
515 &:backdrop { color: $insensitive_inverted_fg_color; }
516 }
517
518 &.left,
519 &.right,
520 &.bottom {
521 &, &:backdrop { background-image: none; }
522 }
523}
524
525// panel styling
526UnityPanelWidget,
527.unity-panel {
528 &, &:backdrop {
529 border-bottom: 1px solid $panel_bg_color;
530 color: $inverted_fg_color;
531 background-image: linear-gradient(to bottom,
532 opacify($panel_bg_color, 0.9));
533 box-shadow: none;
534 }
535}
536
537.unity-panel.menubar,
538.unity-panel .menubar {
539 background-color: transparent;
540 background-image: none;
541 box-shadow: none;
542
543 &.menuitem,
544 & .menuitem * {
545 padding: 0 6px;
546 border-radius: 0;
547 border-bottom: none;
548 color: $inverted_fg_color;
549 background-color: transparent;
550 &:hover {
551 color: $selected_fg_color;
552 box-shadow: inset 0 -2px $selected_bg_color;
553 }
554 }
555}
556
557
558/************
559 * Corebird *
560 ************/
561
562// use normal foreground colour
563GtkStack .button.profile-button {
564 &:checked { color: $fg_color; }
565}
566
567// account menu button
568.titlebar.header-bar GtkBox {
569 .button.account-button { // left-most account-button
570 // revert to square button since we can't make perfect circle button
571 border-radius: 2px;
572 outline-radius: 2px;
573
574 // FIXME: it doesn't work
575 .avatar-round { border-color: transparent; }
576 }
577}
578
579/********
580 * Nemo *
581 ********/
582
583.nemo-desktop.nemo-canvas-item {
584 @extend .nautilus-desktop.nautilus-canvas-item;
585}
586
587NemoWindow {
588 // workaround for invisible text in rename entry
589 EelEditableLabel.entry { transition: none; }
590
591 // draw bottom border of toolbar
592 .toolbar.primary-toolbar {
593 border-bottom: 1px solid $borders_color;
594
595 .button.toggle,
596 .linked > .button {
597 padding: 0 1.2em 0.1em;
598
599 &.image-button {
600 border-radius: 100px;
601 outline-radius: 100px;
602 }
603 }
604 }
605
606 // tweak path-bar buttons
607 .primary-toolbar NemoPathBar.linked.raised {
608 > .button { // ugly arrow button at most-left
609 padding: 0;
610 border-radius: 2px;
611 outline-radius: 2px;
612
613 GtkArrow { -GtkArrow-arrow-scaling: 0.5; }
614
615 &, GtkArrow {
616 color: $secondary_fg_color;
617 &:hover,
618 &:active,
619 &:checked {
620 color: $fg_color;
621 &:insensitive { color: $insensitive_fg_color; }
622 }
623 &:insensitive { color: $insensitive_secondary_fg_color; }
624 }
625 }
626
627 // revive horizontal padding
628 .button.text-button,
629 .button.image-button { padding: 0.3em 0.7em 0.4em; }
630 }
631
632 // tweak notebook colour
633 .notebook { background-color: $base_color; }
634
635 // tweak sidebar
636 .sidebar {
637 .frame { border-width: 0; } // remove double-border
638
639 GtkDrawingArea { background-color: transparent; }
640 }
641
642 // force using flat-style on bottom bar
643 GtkGrid > GtkEventBox {
644 padding: 0.2em;
645 background-color: $secondary_dark_color;
646 box-shadow: if($variant == 'light', $inline-shadow-light,
647 $inline-shadow-dark);
648
649 > .toolbar {
650 border-style: none;
651 background-color: transparent;
652 box-shadow: none;
653 }
654
655 > .toolbar .button.image-button {
656 @extend .button.flat;
657 border-radius: 2px;
658 outline-radius: 2px;
659 padding: 0.7em 1em 0.8em;
660 box-shadow: none;
661 border-image: -gtk-gradient(radial,
662 center bottom, 0,
663 center bottom, 0.001,
664 to($track_color),
665 to(transparent))
666 0 0 0 / 0 0 0px;
667 color: $secondary_fg_color;
668 &:hover {
669 box-shadow: none;
670 border-image: none;
671 color: $fg_color;
672 }
673 &:checked {
674 box-shadow: none;
675 border-image: -gtk-gradient(radial,
676 center bottom, 0,
677 center bottom, 0.5,
678 to($selected_bg_color),
679 to(transparent))
680 0 0 2 / 0 0 2px;
681 background-color: transparent;
682 color: $fg_color;
683 &:insensitive {
684 box-shadow: none;
685 background-color: transparent;
686 color: $insensitive_fg_color;
687 border-image: none;
688 > label { color: inherit; }
689 }
690 }
691 &:insensitive {
692 box-shadow: none;
693 background-color: transparent;
694 color: $insensitive_secondary_fg_color;
695 border-image: none;
696 }
697 }
698
699 > .toolbar .separator.vertical { // remove separator
700 -GtkWidget-separator-width: 0;
701 border: 0 none transparent;
702 color: transparent;
703 }
704 }
705}
706
707
708/***************************
709 * Cinnamon-control-center *
710 ***************************/
711
712CcShellCategoryView { // stop using $base_color
713 CcShellItemView.view { background-color: transparent; }
714}
715
716.cs-header {
717 background-color: $secondary_dark_color;
718 box-shadow: if($variant == 'light', $inline-shadow-light,
719 $inline-shadow-dark);
720}
721
722
723/*********
724 * XFce4 *
725 *********/
726
727.xfce4-panel {
728 background-color: $panel_bg_color;
729 color: $inverted_fg_color;
730 font-weight: 700;
731
732 .button {
733 @include button(flat-normal);
734 padding: 0px 4px;
735 border: none;
736 border-radius: 0;
737 color: $inverted_fg_color;
738 background-color: transparent;
739 &:hover {
740 color: $selected_fg_color;
741 background-color: transparent;
742 box-shadow: inset 0 -2px $track_color;
743 }
744 &:checked,
745 &:hover:checked,
746 &:insensitive:checked { // 'checked' = 'active'
747 color: $selected_fg_color;
748 background-color: transparent;
749 box-shadow: inset 0 -2px $selected_bg_color;
750 }
751
752 .label:backdrop,
753 &:backdrop { opacity: 1.0; }
754 }
755
756 .menu { -gtk-image-effect: none; }
757}
758
759TopMenuAppMenuBar {
760 background-color: $panel_bg_color; // do not use transparent
761 color: $inverted_fg_color;
762 box-shadow: none;
763
764 > .menuitem {
765 color: $inverted_fg_color;
766 background-color: transparent;
767 &:hover {
768 color: $selected_fg_color;
769 box-shadow: inset 0 -2px $selected_bg_color;
770 }
771 &:backdrop { opacity: 1.0; }
772 }
773}
774
775
776/************
777 * Synaptic *
778 ************/
779
780GtkWindow > GtkBox.vertical > GtkBox.horizontal {
781 > .toolbar {
782 background-color: transparent;
783 box-shadow: none;
784
785 GtkToolItem > GtkBox {
786 .label,
787 .entry {
788 padding-top: 0.1em;
789 padding-bottom: 0.1em;
790 font-size: 90%;
791 }
792
793 > .label { color: $insensitive_fg_color; }
794 }
795 }
796
797 > GtkAlignment { background-color: transparent; }
798}
799