Merge lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions into lp:ubuntu-themes/artful
- headerbar-maximized-destructive-suggested-actions
- Merge into 17.10
Proposed by
Marco Trevisan (Treviño)
| Status: | Merged |
|---|---|
| Approved by: | Marco Trevisan (Treviño) |
| Approved revision: | 588 |
| Merged at revision: | 587 |
| Proposed branch: | lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions |
| Merge into: | lp:ubuntu-themes/artful |
| Diff against target: |
505 lines (+392/-2) 2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+196/-1) Radiance/gtk-3.20/gtk-widgets.css (+196/-1) |
| To merge this branch: | bzr merge lp:~3v1n0/ubuntu-themes/headerbar-maximized-destructive-suggested-actions |
| Related bugs: |
| Reviewer | Review Type | Date Requested | Status |
|---|---|---|---|
| Ubuntu Artwork Packagers | Pending | ||
|
Review via email:
|
|||
Commit message
Ambiance, Radiance: Use inverted gradient for button actions in maximized titlebars
Description of the change
To post a comment you must log in.
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
| 1 | === modified file 'Ambiance/gtk-3.20/gtk-widgets.css' | |||
| 2 | --- Ambiance/gtk-3.20/gtk-widgets.css 2017-10-12 05:18:40 +0000 | |||
| 3 | +++ Ambiance/gtk-3.20/gtk-widgets.css 2017-11-15 06:51:54 +0000 | |||
| 4 | @@ -67,7 +67,8 @@ | |||
| 5 | 67 | border-color: transparent; | 67 | border-color: transparent; |
| 6 | 68 | } | 68 | } |
| 7 | 69 | 69 | ||
| 9 | 70 | button.destructive-action { | 70 | button.destructive-action, |
| 10 | 71 | headerbar button.destructive-action { | ||
| 11 | 71 | color: white; | 72 | color: white; |
| 12 | 72 | text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4); | 73 | text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4); |
| 13 | 73 | background-color: shade (@error_bg_color, 1.1); | 74 | background-color: shade (@error_bg_color, 1.1); |
| 14 | @@ -312,6 +313,26 @@ | |||
| 15 | 312 | box-shadow: none; | 313 | box-shadow: none; |
| 16 | 313 | } | 314 | } |
| 17 | 314 | 315 | ||
| 18 | 316 | .horizontal.linked button:not(:only-child) { | ||
| 19 | 317 | background-clip: padding-box; | ||
| 20 | 318 | } | ||
| 21 | 319 | |||
| 22 | 320 | .horizontal.linked button.suggested-action:first-child, | ||
| 23 | 321 | .horizontal.linked button.destructive-action:first-child { | ||
| 24 | 322 | border-left-width: 1px; | ||
| 25 | 323 | border-radius: 8px 0 0 8px; | ||
| 26 | 324 | } | ||
| 27 | 325 | |||
| 28 | 326 | .horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) { | ||
| 29 | 327 | border-radius: 0; | ||
| 30 | 328 | } | ||
| 31 | 329 | |||
| 32 | 330 | .horizontal.linked button.suggested-action:last-child, | ||
| 33 | 331 | .horizontal.linked button.destructive-action:last-child { | ||
| 34 | 332 | border-right-width: 1px; | ||
| 35 | 333 | border-radius: 0 8px 8px 0; | ||
| 36 | 334 | } | ||
| 37 | 335 | |||
| 38 | 315 | .linked.vertical button:backdrop:not(:only-child), | 336 | .linked.vertical button:backdrop:not(:only-child), |
| 39 | 316 | .linked.vertical button.destructive-action:backdrop:not(:only-child), | 337 | .linked.vertical button.destructive-action:backdrop:not(:only-child), |
| 40 | 317 | .linked.vertical button:disabled:not(:only-child), | 338 | .linked.vertical button:disabled:not(:only-child), |
| 41 | @@ -2567,12 +2588,28 @@ | |||
| 42 | 2567 | border-radius: 12px; | 2588 | border-radius: 12px; |
| 43 | 2568 | } | 2589 | } |
| 44 | 2569 | 2590 | ||
| 45 | 2591 | .primary-toolbar button.suggested-action:not(:disabled), | ||
| 46 | 2592 | .maximized headerbar button.suggested-action:not(:disabled), | ||
| 47 | 2593 | .maximized .titlebar:not(headerbar) button.suggested-action:not(:disabled) { | ||
| 48 | 2594 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 49 | 2595 | from (shade (@suggested_action_bg, 0.90)), | ||
| 50 | 2596 | to (shade (@suggested_action_bg, 1.10))); | ||
| 51 | 2597 | } | ||
| 52 | 2598 | |||
| 53 | 2570 | headerbar button.suggested-action:hover { | 2599 | headerbar button.suggested-action:hover { |
| 54 | 2571 | background-image: -gtk-gradient (linear, left top, left bottom, | 2600 | background-image: -gtk-gradient (linear, left top, left bottom, |
| 55 | 2572 | from (shade (@suggested_action_bg, 0.93)), | 2601 | from (shade (@suggested_action_bg, 0.93)), |
| 56 | 2573 | to (shade (@suggested_action_bg, 0.75))); | 2602 | to (shade (@suggested_action_bg, 0.75))); |
| 57 | 2574 | } | 2603 | } |
| 58 | 2575 | 2604 | ||
| 59 | 2605 | .primary-toolbar button.suggested-action:hover, | ||
| 60 | 2606 | .maximized headerbar button.suggested-action:hover, | ||
| 61 | 2607 | .maximized .titlebar:not(headerbar) button.suggested-action:hover { | ||
| 62 | 2608 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 63 | 2609 | from (shade (@suggested_action_bg, 0.75)), | ||
| 64 | 2610 | to (shade (@suggested_action_bg, 0.93))); | ||
| 65 | 2611 | } | ||
| 66 | 2612 | |||
| 67 | 2576 | headerbar button.suggested-action:backdrop:not(:disabled) * { | 2613 | headerbar button.suggested-action:backdrop:not(:disabled) * { |
| 68 | 2577 | color: shade (white, 0.65); | 2614 | color: shade (white, 0.65); |
| 69 | 2578 | } | 2615 | } |
| 70 | @@ -2583,12 +2620,28 @@ | |||
| 71 | 2583 | to (shade (@suggested_action_bg, 0.65))); | 2620 | to (shade (@suggested_action_bg, 0.65))); |
| 72 | 2584 | } | 2621 | } |
| 73 | 2585 | 2622 | ||
| 74 | 2623 | .primary-toolbar button.suggested-action:backdrop:not(:disabled), | ||
| 75 | 2624 | .maximized headerbar button.suggested-action:backdrop:not(:disabled), | ||
| 76 | 2625 | .maximized .titlebar:not(headerbar) button.suggested-action:backdrop:not(:disabled) { | ||
| 77 | 2626 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 78 | 2627 | from (shade (@suggested_action_bg, 0.65)), | ||
| 79 | 2628 | to (shade (@suggested_action_bg, 0.65))); | ||
| 80 | 2629 | } | ||
| 81 | 2630 | |||
| 82 | 2586 | headerbar button.suggested-action:hover:backdrop { | 2631 | headerbar button.suggested-action:hover:backdrop { |
| 83 | 2587 | background-image: -gtk-gradient (linear, left top, left bottom, | 2632 | background-image: -gtk-gradient (linear, left top, left bottom, |
| 84 | 2588 | from (shade (@suggested_action_bg, 0.77)), | 2633 | from (shade (@suggested_action_bg, 0.77)), |
| 85 | 2589 | to (shade (@suggested_action_bg, 0.75))); | 2634 | to (shade (@suggested_action_bg, 0.75))); |
| 86 | 2590 | } | 2635 | } |
| 87 | 2591 | 2636 | ||
| 88 | 2637 | .primary-toolbar button.suggested-action:hover:backdrop, | ||
| 89 | 2638 | .maximized headerbar button.suggested-action:hover:backdrop, | ||
| 90 | 2639 | .maximized .titlebar:not(headerbar) button.suggested-action:hover:backdrop { | ||
| 91 | 2640 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 92 | 2641 | from (shade (@suggested_action_bg, 0.75)), | ||
| 93 | 2642 | to (shade (@suggested_action_bg, 0.77))); | ||
| 94 | 2643 | } | ||
| 95 | 2644 | |||
| 96 | 2592 | headerbar button.suggested-action:hover:backdrop * { | 2645 | headerbar button.suggested-action:hover:backdrop * { |
| 97 | 2593 | color: shade (white, 0.67); | 2646 | color: shade (white, 0.67); |
| 98 | 2594 | } | 2647 | } |
| 99 | @@ -2599,11 +2652,153 @@ | |||
| 100 | 2599 | to (shade (@suggested_action_bg, 0.65))); | 2652 | to (shade (@suggested_action_bg, 0.65))); |
| 101 | 2600 | } | 2653 | } |
| 102 | 2601 | 2654 | ||
| 103 | 2655 | .primary-toolbar button.suggested-action:active, | ||
| 104 | 2656 | .maximized headerbar button.suggested-action:active, | ||
| 105 | 2657 | .maximized .titlebar:not(headerbar) button.suggested-action:active { | ||
| 106 | 2658 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 107 | 2659 | from (shade (@suggested_action_bg, 0.65)), | ||
| 108 | 2660 | to (shade (@suggested_action_bg, 0.80))); | ||
| 109 | 2661 | } | ||
| 110 | 2662 | |||
| 111 | 2602 | headerbar button.suggested-action:disabled * { | 2663 | headerbar button.suggested-action:disabled * { |
| 112 | 2603 | color: @fg_color; | 2664 | color: @fg_color; |
| 113 | 2604 | text-shadow: none; | 2665 | text-shadow: none; |
| 114 | 2605 | } | 2666 | } |
| 115 | 2606 | 2667 | ||
| 116 | 2668 | .primary-toolbar .linked button.suggested-action, | ||
| 117 | 2669 | headerbar .linked button.suggested-action { | ||
| 118 | 2670 | box-shadow: inset 1px 0 @suggested_action_bg, | ||
| 119 | 2671 | inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 120 | 2672 | } | ||
| 121 | 2673 | |||
| 122 | 2674 | .primary-toolbar .linked button.suggested-action:first-child, | ||
| 123 | 2675 | headerbar .linked button.suggested-action:first-child { | ||
| 124 | 2676 | box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 125 | 2677 | } | ||
| 126 | 2678 | |||
| 127 | 2679 | .primary-toolbar .linked button.suggested-action:last-child, | ||
| 128 | 2680 | headerbar .linked button.suggested-action:last-child { | ||
| 129 | 2681 | box-shadow: inset 1px 0 @suggested_action_bg; | ||
| 130 | 2682 | } | ||
| 131 | 2683 | |||
| 132 | 2684 | .primary-toolbar .linked button.suggested-action:backdrop, | ||
| 133 | 2685 | headerbar .linked button.suggested-action:backdrop { | ||
| 134 | 2686 | box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65), | ||
| 135 | 2687 | inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 136 | 2688 | } | ||
| 137 | 2689 | |||
| 138 | 2690 | /* destructive action */ | ||
| 139 | 2691 | headerbar button.destructive-action:not(:disabled) * { | ||
| 140 | 2692 | color: white; | ||
| 141 | 2693 | text-shadow: 0 -1px shade (@dark_bg_color, 1.2); | ||
| 142 | 2694 | } | ||
| 143 | 2695 | |||
| 144 | 2696 | headerbar button.destructive-action:not(:disabled) { | ||
| 145 | 2697 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 146 | 2698 | from (shade (@error_bg_color, 1.10)), | ||
| 147 | 2699 | to (shade (@error_bg_color, 0.90))); | ||
| 148 | 2700 | border-radius: 12px; | ||
| 149 | 2701 | } | ||
| 150 | 2702 | |||
| 151 | 2703 | .primary-toolbar button.destructive-action:not(:disabled), | ||
| 152 | 2704 | .maximized headerbar button.destructive-action:not(:disabled), | ||
| 153 | 2705 | .maximized .titlebar:not(headerbar) button.destructive-action:not(:disabled) { | ||
| 154 | 2706 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 155 | 2707 | from (shade (@error_bg_color, 0.90)), | ||
| 156 | 2708 | to (shade (@error_bg_color, 1.10))); | ||
| 157 | 2709 | } | ||
| 158 | 2710 | |||
| 159 | 2711 | headerbar button.destructive-action:hover { | ||
| 160 | 2712 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 161 | 2713 | from (shade (@error_bg_color, 0.93)), | ||
| 162 | 2714 | to (shade (@error_bg_color, 0.75))); | ||
| 163 | 2715 | } | ||
| 164 | 2716 | |||
| 165 | 2717 | .primary-toolbar button.destructive-action:hover, | ||
| 166 | 2718 | .maximized headerbar button.destructive-action:hover, | ||
| 167 | 2719 | .maximized .titlebar:not(headerbar) button.destructive-action:hover { | ||
| 168 | 2720 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 169 | 2721 | from (shade (@error_bg_color, 0.75)), | ||
| 170 | 2722 | to (shade (@error_bg_color, 0.93))); | ||
| 171 | 2723 | } | ||
| 172 | 2724 | |||
| 173 | 2725 | headerbar button.destructive-action:backdrop:not(:disabled) * { | ||
| 174 | 2726 | color: shade (white, 0.65); | ||
| 175 | 2727 | } | ||
| 176 | 2728 | |||
| 177 | 2729 | headerbar button.destructive-action:backdrop:not(:disabled) { | ||
| 178 | 2730 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 179 | 2731 | from (shade (@error_bg_color, 0.65)), | ||
| 180 | 2732 | to (shade (@error_bg_color, 0.65))); | ||
| 181 | 2733 | } | ||
| 182 | 2734 | |||
| 183 | 2735 | .primary-toolbar button.destructive-action:backdrop:not(:disabled), | ||
| 184 | 2736 | .maximized headerbar button.destructive-action:backdrop:not(:disabled), | ||
| 185 | 2737 | .maximized .titlebar:not(headerbar) button.destructive-action:backdrop:not(:disabled) { | ||
| 186 | 2738 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 187 | 2739 | from (shade (@error_bg_color, 0.65)), | ||
| 188 | 2740 | to (shade (@error_bg_color, 0.65))); | ||
| 189 | 2741 | } | ||
| 190 | 2742 | |||
| 191 | 2743 | headerbar button.destructive-action:hover:backdrop { | ||
| 192 | 2744 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 193 | 2745 | from (shade (@error_bg_color, 0.77)), | ||
| 194 | 2746 | to (shade (@error_bg_color, 0.75))); | ||
| 195 | 2747 | } | ||
| 196 | 2748 | |||
| 197 | 2749 | .primary-toolbar button.destructive-action:hover:backdrop, | ||
| 198 | 2750 | .maximized headerbar button.destructive-action:hover:backdrop, | ||
| 199 | 2751 | .maximized .titlebar:not(headerbar) button.destructive-action:hover:backdrop { | ||
| 200 | 2752 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 201 | 2753 | from (shade (@error_bg_color, 0.75)), | ||
| 202 | 2754 | to (shade (@error_bg_color, 0.77))); | ||
| 203 | 2755 | } | ||
| 204 | 2756 | |||
| 205 | 2757 | headerbar button.destructive-action:hover:backdrop * { | ||
| 206 | 2758 | color: shade (white, 0.67); | ||
| 207 | 2759 | } | ||
| 208 | 2760 | |||
| 209 | 2761 | headerbar button.destructive-action:active { | ||
| 210 | 2762 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 211 | 2763 | from (shade (@error_bg_color, 0.80)), | ||
| 212 | 2764 | to (shade (@error_bg_color, 0.65))); | ||
| 213 | 2765 | } | ||
| 214 | 2766 | |||
| 215 | 2767 | .primary-toolbar button.destructive-action:active, | ||
| 216 | 2768 | .maximized headerbar button.destructive-action:active, | ||
| 217 | 2769 | .maximized .titlebar:not(headerbar) button.destructive-action:active { | ||
| 218 | 2770 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 219 | 2771 | from (shade (@error_bg_color, 0.65)), | ||
| 220 | 2772 | to (shade (@error_bg_color, 0.80))); | ||
| 221 | 2773 | } | ||
| 222 | 2774 | |||
| 223 | 2775 | headerbar button.destructive-action:disabled * { | ||
| 224 | 2776 | color: @fg_color; | ||
| 225 | 2777 | text-shadow: none; | ||
| 226 | 2778 | } | ||
| 227 | 2779 | |||
| 228 | 2780 | .primary-toolbar .linked button.destructive-action, | ||
| 229 | 2781 | headerbar .linked button.destructive-action { | ||
| 230 | 2782 | box-shadow: inset 1px 0 @error_bg_color, | ||
| 231 | 2783 | inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 232 | 2784 | } | ||
| 233 | 2785 | |||
| 234 | 2786 | .primary-toolbar .linked button.destructive-action:first-child, | ||
| 235 | 2787 | headerbar .linked button.destructive-action:first-child { | ||
| 236 | 2788 | box-shadow: inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 237 | 2789 | } | ||
| 238 | 2790 | |||
| 239 | 2791 | .primary-toolbar .linked button.destructive-action:last-child, | ||
| 240 | 2792 | headerbar .linked button.destructive-action:last-child { | ||
| 241 | 2793 | box-shadow: inset 1px 0 @error_bg_color; | ||
| 242 | 2794 | } | ||
| 243 | 2795 | |||
| 244 | 2796 | .primary-toolbar .linked button.destructive-action:backdrop, | ||
| 245 | 2797 | headerbar .linked button.destructive-action:backdrop { | ||
| 246 | 2798 | box-shadow: inset 1px 0 shade (@error_bg_color, 0.65), | ||
| 247 | 2799 | inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 248 | 2800 | } | ||
| 249 | 2801 | |||
| 250 | 2607 | .primary-toolbar separator, | 2802 | .primary-toolbar separator, |
| 251 | 2608 | .primary-toolbar separator, | 2803 | .primary-toolbar separator, |
| 252 | 2609 | .primary-toolbar separator:disabled, | 2804 | .primary-toolbar separator:disabled, |
| 253 | 2610 | 2805 | ||
| 254 | === modified file 'Radiance/gtk-3.20/gtk-widgets.css' | |||
| 255 | --- Radiance/gtk-3.20/gtk-widgets.css 2017-10-12 05:18:40 +0000 | |||
| 256 | +++ Radiance/gtk-3.20/gtk-widgets.css 2017-11-15 06:51:54 +0000 | |||
| 257 | @@ -66,7 +66,8 @@ | |||
| 258 | 66 | border-color: transparent; | 66 | border-color: transparent; |
| 259 | 67 | } | 67 | } |
| 260 | 68 | 68 | ||
| 262 | 69 | button.destructive-action { | 69 | button.destructive-action, |
| 263 | 70 | headerbar button.destructive-action { | ||
| 264 | 70 | color: white; | 71 | color: white; |
| 265 | 71 | text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4); | 72 | text-shadow: 0 1px alpha (shade (@error_bg_color, 1.55), 0.4); |
| 266 | 72 | background-color: shade (@error_bg_color, 1.1); | 73 | background-color: shade (@error_bg_color, 1.1); |
| 267 | @@ -311,6 +312,26 @@ | |||
| 268 | 311 | box-shadow: none; | 312 | box-shadow: none; |
| 269 | 312 | } | 313 | } |
| 270 | 313 | 314 | ||
| 271 | 315 | .horizontal.linked button:not(:only-child) { | ||
| 272 | 316 | background-clip: padding-box; | ||
| 273 | 317 | } | ||
| 274 | 318 | |||
| 275 | 319 | .horizontal.linked button.suggested-action:first-child, | ||
| 276 | 320 | .horizontal.linked button.destructive-action:first-child { | ||
| 277 | 321 | border-left-width: 1px; | ||
| 278 | 322 | border-radius: 8px 0 0 8px; | ||
| 279 | 323 | } | ||
| 280 | 324 | |||
| 281 | 325 | .horizontal.linked button.suggested-action:not(:only-child):not(:first-child):not(:last-child) { | ||
| 282 | 326 | border-radius: 0; | ||
| 283 | 327 | } | ||
| 284 | 328 | |||
| 285 | 329 | .horizontal.linked button.suggested-action:last-child, | ||
| 286 | 330 | .horizontal.linked button.destructive-action:last-child { | ||
| 287 | 331 | border-right-width: 1px; | ||
| 288 | 332 | border-radius: 0 8px 8px 0; | ||
| 289 | 333 | } | ||
| 290 | 334 | |||
| 291 | 314 | .linked.vertical button:backdrop:not(:only-child), | 335 | .linked.vertical button:backdrop:not(:only-child), |
| 292 | 315 | .linked.vertical button.destructive-action:backdrop:not(:only-child), | 336 | .linked.vertical button.destructive-action:backdrop:not(:only-child), |
| 293 | 316 | .linked.vertical button:disabled:not(:only-child), | 337 | .linked.vertical button:disabled:not(:only-child), |
| 294 | @@ -2568,12 +2589,28 @@ | |||
| 295 | 2568 | border-radius: 12px; | 2589 | border-radius: 12px; |
| 296 | 2569 | } | 2590 | } |
| 297 | 2570 | 2591 | ||
| 298 | 2592 | .primary-toolbar button.suggested-action:not(:disabled), | ||
| 299 | 2593 | .maximized headerbar button.suggested-action:not(:disabled), | ||
| 300 | 2594 | .maximized .titlebar:not(headerbar) button.suggested-action:not(:disabled) { | ||
| 301 | 2595 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 302 | 2596 | from (shade (@suggested_action_bg, 0.90)), | ||
| 303 | 2597 | to (shade (@suggested_action_bg, 1.10))); | ||
| 304 | 2598 | } | ||
| 305 | 2599 | |||
| 306 | 2571 | headerbar button.suggested-action:hover { | 2600 | headerbar button.suggested-action:hover { |
| 307 | 2572 | background-image: -gtk-gradient (linear, left top, left bottom, | 2601 | background-image: -gtk-gradient (linear, left top, left bottom, |
| 308 | 2573 | from (shade (@suggested_action_bg, 0.98)), | 2602 | from (shade (@suggested_action_bg, 0.98)), |
| 309 | 2574 | to (shade (@suggested_action_bg, 0.79))); | 2603 | to (shade (@suggested_action_bg, 0.79))); |
| 310 | 2575 | } | 2604 | } |
| 311 | 2576 | 2605 | ||
| 312 | 2606 | .primary-toolbar button.suggested-action:hover, | ||
| 313 | 2607 | .maximized headerbar button.suggested-action:hover, | ||
| 314 | 2608 | .maximized .titlebar:not(headerbar) button.suggested-action:hover { | ||
| 315 | 2609 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 316 | 2610 | from (shade (@suggested_action_bg, 0.75)), | ||
| 317 | 2611 | to (shade (@suggested_action_bg, 0.93))); | ||
| 318 | 2612 | } | ||
| 319 | 2613 | |||
| 320 | 2577 | headerbar button.suggested-action:backdrop:not(:disabled) * { | 2614 | headerbar button.suggested-action:backdrop:not(:disabled) * { |
| 321 | 2578 | color: alpha (white, 0.65); | 2615 | color: alpha (white, 0.65); |
| 322 | 2579 | } | 2616 | } |
| 323 | @@ -2584,12 +2621,28 @@ | |||
| 324 | 2584 | to (alpha (@suggested_action_bg, 0.80))); | 2621 | to (alpha (@suggested_action_bg, 0.80))); |
| 325 | 2585 | } | 2622 | } |
| 326 | 2586 | 2623 | ||
| 327 | 2624 | .primary-toolbar button.suggested-action:backdrop:not(:disabled), | ||
| 328 | 2625 | .maximized headerbar button.suggested-action:backdrop:not(:disabled), | ||
| 329 | 2626 | .maximized .titlebar:not(headerbar) button.suggested-action:backdrop:not(:disabled) { | ||
| 330 | 2627 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 331 | 2628 | from (alpha (@suggested_action_bg, 0.80)), | ||
| 332 | 2629 | to (alpha (@suggested_action_bg, 0.80))); | ||
| 333 | 2630 | } | ||
| 334 | 2631 | |||
| 335 | 2587 | headerbar button.suggested-action:hover:backdrop { | 2632 | headerbar button.suggested-action:hover:backdrop { |
| 336 | 2588 | background-image: -gtk-gradient (linear, left top, left bottom, | 2633 | background-image: -gtk-gradient (linear, left top, left bottom, |
| 337 | 2589 | from (alpha (@suggested_action_bg, 0.70)), | 2634 | from (alpha (@suggested_action_bg, 0.70)), |
| 338 | 2590 | to (alpha (@suggested_action_bg, 0.69))); | 2635 | to (alpha (@suggested_action_bg, 0.69))); |
| 339 | 2591 | } | 2636 | } |
| 340 | 2592 | 2637 | ||
| 341 | 2638 | .primary-toolbar button.suggested-action:hover:backdrop, | ||
| 342 | 2639 | .maximized headerbar button.suggested-action:hover:backdrop, | ||
| 343 | 2640 | .maximized .titlebar:not(headerbar) button.suggested-action:hover:backdrop { | ||
| 344 | 2641 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 345 | 2642 | from (alpha (@suggested_action_bg, 0.69)), | ||
| 346 | 2643 | to (alpha (@suggested_action_bg, 0.70))); | ||
| 347 | 2644 | } | ||
| 348 | 2645 | |||
| 349 | 2593 | headerbar button.suggested-action:hover:backdrop * { | 2646 | headerbar button.suggested-action:hover:backdrop * { |
| 350 | 2594 | color: alpha (white, 0.67); | 2647 | color: alpha (white, 0.67); |
| 351 | 2595 | } | 2648 | } |
| 352 | @@ -2600,11 +2653,153 @@ | |||
| 353 | 2600 | to (shade (@suggested_action_bg, 0.70))); | 2653 | to (shade (@suggested_action_bg, 0.70))); |
| 354 | 2601 | } | 2654 | } |
| 355 | 2602 | 2655 | ||
| 356 | 2656 | .primary-toolbar button.suggested-action:active, | ||
| 357 | 2657 | .maximized headerbar button.suggested-action:active, | ||
| 358 | 2658 | .maximized .titlebar:not(headerbar) button.suggested-action:active { | ||
| 359 | 2659 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 360 | 2660 | from (shade (@suggested_action_bg, 0.65)), | ||
| 361 | 2661 | to (shade (@suggested_action_bg, 0.80))); | ||
| 362 | 2662 | } | ||
| 363 | 2663 | |||
| 364 | 2603 | headerbar button.suggested-action:disabled * { | 2664 | headerbar button.suggested-action:disabled * { |
| 365 | 2604 | color: @fg_color; | 2665 | color: @fg_color; |
| 366 | 2605 | text-shadow: none; | 2666 | text-shadow: none; |
| 367 | 2606 | } | 2667 | } |
| 368 | 2607 | 2668 | ||
| 369 | 2669 | .primary-toolbar .linked button.suggested-action, | ||
| 370 | 2670 | headerbar .linked button.suggested-action { | ||
| 371 | 2671 | box-shadow: inset 1px 0 @suggested_action_bg, | ||
| 372 | 2672 | inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 373 | 2673 | } | ||
| 374 | 2674 | |||
| 375 | 2675 | .primary-toolbar .linked button.suggested-action:first-child, | ||
| 376 | 2676 | headerbar .linked button.suggested-action:first-child { | ||
| 377 | 2677 | box-shadow: inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 378 | 2678 | } | ||
| 379 | 2679 | |||
| 380 | 2680 | .primary-toolbar .linked button.suggested-action:last-child, | ||
| 381 | 2681 | headerbar .linked button.suggested-action:last-child { | ||
| 382 | 2682 | box-shadow: inset 1px 0 @suggested_action_bg; | ||
| 383 | 2683 | } | ||
| 384 | 2684 | |||
| 385 | 2685 | .primary-toolbar .linked button.suggested-action:backdrop, | ||
| 386 | 2686 | headerbar .linked button.suggested-action:backdrop { | ||
| 387 | 2687 | box-shadow: inset 1px 0 shade (@suggested_action_bg, 0.65), | ||
| 388 | 2688 | inset -1px 0 shade (@suggested_action_bg, 0.65); | ||
| 389 | 2689 | } | ||
| 390 | 2690 | |||
| 391 | 2691 | /* destructive action */ | ||
| 392 | 2692 | headerbar button.destructive-action:not(:disabled) * { | ||
| 393 | 2693 | color: white; | ||
| 394 | 2694 | text-shadow: 0 -1px shade (@dark_bg_color, 1.2); | ||
| 395 | 2695 | } | ||
| 396 | 2696 | |||
| 397 | 2697 | headerbar button.destructive-action:not(:disabled) { | ||
| 398 | 2698 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 399 | 2699 | from (shade (@error_bg_color, 1.10)), | ||
| 400 | 2700 | to (shade (@error_bg_color, 0.90))); | ||
| 401 | 2701 | border-radius: 12px; | ||
| 402 | 2702 | } | ||
| 403 | 2703 | |||
| 404 | 2704 | .primary-toolbar button.destructive-action:not(:disabled), | ||
| 405 | 2705 | .maximized headerbar button.destructive-action:not(:disabled), | ||
| 406 | 2706 | .maximized .titlebar:not(headerbar) button.destructive-action:not(:disabled) { | ||
| 407 | 2707 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 408 | 2708 | from (shade (@error_bg_color, 0.90)), | ||
| 409 | 2709 | to (shade (@error_bg_color, 1.10))); | ||
| 410 | 2710 | } | ||
| 411 | 2711 | |||
| 412 | 2712 | headerbar button.destructive-action:hover { | ||
| 413 | 2713 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 414 | 2714 | from (shade (@error_bg_color, 0.93)), | ||
| 415 | 2715 | to (shade (@error_bg_color, 0.75))); | ||
| 416 | 2716 | } | ||
| 417 | 2717 | |||
| 418 | 2718 | .primary-toolbar button.destructive-action:hover, | ||
| 419 | 2719 | .maximized headerbar button.destructive-action:hover, | ||
| 420 | 2720 | .maximized .titlebar:not(headerbar) button.destructive-action:hover { | ||
| 421 | 2721 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 422 | 2722 | from (shade (@error_bg_color, 0.75)), | ||
| 423 | 2723 | to (shade (@error_bg_color, 0.93))); | ||
| 424 | 2724 | } | ||
| 425 | 2725 | |||
| 426 | 2726 | headerbar button.destructive-action:backdrop:not(:disabled) * { | ||
| 427 | 2727 | color: shade (white, 0.65); | ||
| 428 | 2728 | } | ||
| 429 | 2729 | |||
| 430 | 2730 | headerbar button.destructive-action:backdrop:not(:disabled) { | ||
| 431 | 2731 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 432 | 2732 | from (shade (@error_bg_color, 0.65)), | ||
| 433 | 2733 | to (shade (@error_bg_color, 0.65))); | ||
| 434 | 2734 | } | ||
| 435 | 2735 | |||
| 436 | 2736 | .primary-toolbar button.destructive-action:backdrop:not(:disabled), | ||
| 437 | 2737 | .maximized headerbar button.destructive-action:backdrop:not(:disabled), | ||
| 438 | 2738 | .maximized .titlebar:not(headerbar) button.destructive-action:backdrop:not(:disabled) { | ||
| 439 | 2739 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 440 | 2740 | from (shade (@error_bg_color, 0.65)), | ||
| 441 | 2741 | to (shade (@error_bg_color, 0.65))); | ||
| 442 | 2742 | } | ||
| 443 | 2743 | |||
| 444 | 2744 | headerbar button.destructive-action:hover:backdrop { | ||
| 445 | 2745 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 446 | 2746 | from (shade (@error_bg_color, 0.77)), | ||
| 447 | 2747 | to (shade (@error_bg_color, 0.75))); | ||
| 448 | 2748 | } | ||
| 449 | 2749 | |||
| 450 | 2750 | .primary-toolbar button.destructive-action:hover:backdrop, | ||
| 451 | 2751 | .maximized headerbar button.destructive-action:hover:backdrop, | ||
| 452 | 2752 | .maximized .titlebar:not(headerbar) button.destructive-action:hover:backdrop { | ||
| 453 | 2753 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 454 | 2754 | from (shade (@error_bg_color, 0.75)), | ||
| 455 | 2755 | to (shade (@error_bg_color, 0.77))); | ||
| 456 | 2756 | } | ||
| 457 | 2757 | |||
| 458 | 2758 | headerbar button.destructive-action:hover:backdrop * { | ||
| 459 | 2759 | color: shade (white, 0.67); | ||
| 460 | 2760 | } | ||
| 461 | 2761 | |||
| 462 | 2762 | headerbar button.destructive-action:active { | ||
| 463 | 2763 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 464 | 2764 | from (shade (@error_bg_color, 0.80)), | ||
| 465 | 2765 | to (shade (@error_bg_color, 0.65))); | ||
| 466 | 2766 | } | ||
| 467 | 2767 | |||
| 468 | 2768 | .primary-toolbar button.destructive-action:active, | ||
| 469 | 2769 | .maximized headerbar button.destructive-action:active, | ||
| 470 | 2770 | .maximized .titlebar:not(headerbar) button.destructive-action:active { | ||
| 471 | 2771 | background-image: -gtk-gradient (linear, left top, left bottom, | ||
| 472 | 2772 | from (shade (@error_bg_color, 0.65)), | ||
| 473 | 2773 | to (shade (@error_bg_color, 0.80))); | ||
| 474 | 2774 | } | ||
| 475 | 2775 | |||
| 476 | 2776 | headerbar button.destructive-action:disabled * { | ||
| 477 | 2777 | color: @fg_color; | ||
| 478 | 2778 | text-shadow: none; | ||
| 479 | 2779 | } | ||
| 480 | 2780 | |||
| 481 | 2781 | .primary-toolbar .linked button.destructive-action, | ||
| 482 | 2782 | headerbar .linked button.destructive-action { | ||
| 483 | 2783 | box-shadow: inset 1px 0 @error_bg_color, | ||
| 484 | 2784 | inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 485 | 2785 | } | ||
| 486 | 2786 | |||
| 487 | 2787 | .primary-toolbar .linked button.destructive-action:first-child, | ||
| 488 | 2788 | headerbar .linked button.destructive-action:first-child { | ||
| 489 | 2789 | box-shadow: inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 490 | 2790 | } | ||
| 491 | 2791 | |||
| 492 | 2792 | .primary-toolbar .linked button.destructive-action:last-child, | ||
| 493 | 2793 | headerbar .linked button.destructive-action:last-child { | ||
| 494 | 2794 | box-shadow: inset 1px 0 @error_bg_color; | ||
| 495 | 2795 | } | ||
| 496 | 2796 | |||
| 497 | 2797 | .primary-toolbar .linked button.destructive-action:backdrop, | ||
| 498 | 2798 | headerbar .linked button.destructive-action:backdrop { | ||
| 499 | 2799 | box-shadow: inset 1px 0 shade (@error_bg_color, 0.65), | ||
| 500 | 2800 | inset -1px 0 shade (@error_bg_color, 0.65); | ||
| 501 | 2801 | } | ||
| 502 | 2802 | |||
| 503 | 2608 | .primary-toolbar separator, | 2803 | .primary-toolbar separator, |
| 504 | 2609 | .primary-toolbar separator, | 2804 | .primary-toolbar separator, |
| 505 | 2610 | .primary-toolbar separator:disabled, | 2805 | .primary-toolbar separator:disabled, |
