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