themes/whitey/gtk-3.22/_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 icon's 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 {
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 $inverted_dark_color);
540 // The foreground color will be used to paint the text
541 color: $inverted_fg_color;
542 box-shadow: inset 0 1px $highlight_color;
543
544 &:backdrop { color: $insensitive_inverted_fg_color; }
545 }
546
547 &.left,
548 &.right,
549 &.bottom {
550 &, &:backdrop { background-image: none; }
551 }
552}
553
554// panel styling
555UnityPanelWidget,
556.unity-panel {
557 &, &:backdrop {
558 border-bottom: 1px solid $panel_bg_color;
559 color: $inverted_fg_color;
560 background-image: linear-gradient(to bottom,
561 opacify($panel_bg_color, 0.9),
562 opacify($panel_bg_color, 0.9));
563 box-shadow: none;
564 }
565}
566
567.unity-panel.menubar,
568.unity-panel .menubar {
569 background-color: transparent;
570 background-image: none;
571 box-shadow: none;
572
573 &.menuitem,
574 & .menuitem * {
575 padding: 0 6px;
576 border-radius: 0;
577 border-bottom: none;
578 color: $inverted_fg_color;
579 background-color: transparent;
580 &:hover {
581 color: $selected_fg_color;
582 box-shadow: inset 0 -2px $selected_bg_color;
583 }
584 }
585}
586
587
588/************
589 * Corebird *
590 ************/
591
592// use normal foreground colour
593stack button.profile-button {
594 &:checked { color: $fg_color; }
595}
596
597headerbar.titlebar box {
598 button.toggle.account-button { // left-most account-button
599 min-width: rem(13.3px);
600 min-height: rem(13.3px);
601 // it doesn't work
602 padding: rem(6.7px) rem(10px) rem(6.7px);
603 // revert to square button since we can't make perfect circle button
604 border-radius: 2px;
605 -gtk-outline-radius: 2px;
606
607 // it doesn't work
608 .avatar-round { border-color: transparent; }
609 }
610
611 button.image-button.toggle { // tweet button
612 min-width: rem(13.3px);
613 min-height: rem(13.3px);
614 padding: rem(6.7px) rem(10px) rem(6.7px);
615 }
616}
617
618
619/********
620 * Nemo *
621 ********/
622
623.nemo-desktop.nemo-canvas-item {
624 @extend .nautilus-desktop.nautilus-canvas-item;
625}
626
627window {
628 // Workaround for invisible text in rename entry
629 EelEditableLabel { transition: none; }
630
631 // draw bottom border and shadows
632 grid > box > box > toolbar.primary-toolbar {
633 border-bottom: 1px solid $borders_color;
634 box-shadow: if($variant == 'light', $toolbar-shadow-light,
635 $toolbar-shadow-dark);
636 }
637
638 // tweak notebook colour
639 grid > paned > box > paned > box > notebook {
640 &, > stack:not(:only-child) {
641 background-color: $base_color;
642 }
643 }
644
645 // remove double-border
646 grid.vertical > paned.horizontal > box.vertical {
647 > scrolledwindow.frame {
648 border-width: 0;
649 }
650 }
651
652 // force using flat-style on bottom bar
653 grid.vertical > widget {
654 // FIXME: conflicts with lollypop.
655 // background-color: $secondary_dark_color;
656 // box-shadow: $inline-shadow;
657
658 > box { padding: rem(2.7px); }
659
660 > box > button.image-button {
661 @include button(flat-normal);
662 min-width: rem(13.3px);
663 min-height: rem(29.3px);
664 border-radius: 2px;
665 -gtk-outline-radius: 2px;
666 padding: 0 rem(10px) 0;
667 border-image: -gtk-gradient(radial,
668 center bottom, 0,
669 center bottom, 0.001,
670 to($track_color),
671 to(transparent))
672 0 0 0 / 0 0 0px;
673 color: $secondary_fg_color;
674 box-shadow: none;
675 &:hover {
676 @include button(flat-hover);
677 border-image: none;
678 color: $fg_color;
679 box-shadow: none;
680 }
681 &:checked {
682 @include button(flat-checked);
683 border-image: -gtk-gradient(radial,
684 center bottom, 0,
685 center bottom, 0.5,
686 to($selected_bg_color),
687 to(transparent))
688 0 0 2 / 0 0 2px;
689 background-color: transparent;
690 color: $fg_color;
691 box-shadow: none;
692 &:disabled {
693 @include button(flat-checked-insensitive);
694 border-image: none;
695 background-color: transparent;
696 color: $insensitive_fg_color;
697 box-shadow: none;
698 > label { color: inherit; }
699 }
700 }
701 &:disabled {
702 @include button(flat-insensitive);
703 border-image: none;
704 background-color: transparent;
705 color: $insensitive_secondary_fg_color;
706 box-shadow: none;
707 }
708 }
709
710 box > separator.vertical { // remove separator
711 min-width: 0;
712 color: transparent;
713 background-color: transparent;
714 }
715 }
716}
717
718
719/************
720 * Lollypop *
721 ************/
722
723window > headerbar > widget > box.horizontal {
724 > grid.horizontal > button.toggle.image-button {
725 min-width: rem(17.3px);
726 min-height: rem(37.3px);
727 padding: 0 rem(10px) 0;
728 }
729
730 > button.image-button {
731 min-width: rem(17.3px);
732 min-height: rem(37.3px);
733 margin: rem(-2px) 0;
734 padding: 0 rem(10px) 0;
735 }
736}
737
738
739/***************************
740 * Cinnamon-control-center *
741 ***************************/
742
743window > box.vertical > stack > scrolledwindow {
744 // stop using $base_color
745 iconview {
746 &, &.view { background-color: transparent; }
747 }
748
749 toolbar {
750 background-color: $secondary_dark_color;
751 box-shadow: if($variant == 'light', $inline-shadow-light,
752 $inline-shadow-dark);
753 }
754}
755
756
757/*********
758 * XFce4 *
759 *********/
760
761.xfce4-panel {
762 background-color: $panel_bg_color;
763 color: $inverted_fg_color;
764 font-weight: 700;
765
766 button {
767 @include button(flat-normal);
768 padding: 0px 4px;
769 border: none;
770 border-radius: 0;
771 color: $inverted_fg_color;
772 background-color: transparent;
773 &:hover {
774 color: $selected_fg_color;
775 background-color: transparent;
776 box-shadow: inset 0 -2px $track_color;
777 }
778 &:checked,
779 &:hover:checked,
780 &:disabled:checked { // 'checked' = 'active'
781 color: $selected_fg_color;
782 background-color: transparent;
783 box-shadow: inset 0 -2px $selected_bg_color;
784 }
785
786 label:backdrop,
787 &:backdrop { opacity: 1.0; }
788 }
789
790 menu { -gtk-icon-effect: none; }
791}
792
793TopMenuAppMenuBar {
794 background-color: $panel_bg_color; // do not use transparent
795 color: $inverted_fg_color;
796 box-shadow: none;
797
798 > menuitem {
799 color: $inverted_fg_color;
800 background-color: transparent;
801 &:hover {
802 color: $selected_fg_color;
803 box-shadow: inset 0 -2px $selected_bg_color;
804 }
805 &:backdrop { opacity: 1.0; }
806 }
807}
808
809
810/**************
811 * FeedReader *
812 **************/
813
814window > paned.titlebar > headerbar.titlebar {
815 button.flat {
816 // FIXME: when developer will use .image-button class?
817 &:not(.titlebutton):not(.image-button):not(.text-button):not(.toggle) {
818 min-width: rem(13.3px);
819 padding-left: rem(12px);
820 padding-right: rem(12px);
821 }
822 }
823}
824
825
826/************
827 * Synaptic *
828 ************/
829
830window > box.vertical > box.horizontal {
831 > toolbar {
832 background-color: transparent;
833 box-shadow: none;
834
835 toolitem > box {
836 label,
837 entry {
838 min-height: rem(13.3px);
839 padding-top: rem(1.3px);
840 padding-bottom: rem(1.3px);
841 font-size: 90%;
842 }
843
844 > label { color: $insensitive_fg_color; }
845 }
846 }
847
848 > widget { background-color: transparent; }
849}
850