Merge lp:~c-lobrano/ubuntu-themes/increase-window-control-buttons-size into lp:ubuntu-themes

Proposed by Carlo Lobrano on 2018-04-09
Status: Needs review
Proposed branch: lp:~c-lobrano/ubuntu-themes/increase-window-control-buttons-size
Merge into: lp:ubuntu-themes
Diff against target: 225 lines (+32/-48)
2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+16/-24)
Radiance/gtk-3.20/gtk-widgets.css (+16/-24)
To merge this branch: bzr merge lp:~c-lobrano/ubuntu-themes/increase-window-control-buttons-size
Reviewer Review Type Date Requested Status
Daniel van Vugt 2018-04-09 Needs Information on 2018-04-10
Ubuntu Artwork Packagers 2018-04-10 Pending
Review via email: mp+342898@code.launchpad.net

Commit message

Ambiance, Radiance: increased window control buttons size

To post a comment you must log in.
Daniel van Vugt (vanvugt) wrote :

Doesn't this change the button spacing rather than the visible size?

If it's only the former then this proposal should not be linked to bug 1693609.

Daniel van Vugt (vanvugt) :
review: Needs Information
Daniel van Vugt (vanvugt) wrote :

It might help to link to screenshots so people don't have to go to as much effort to review this.

Carlo Lobrano (c-lobrano) wrote :

> Doesn't this change the button spacing rather than the visible size?

Yes it changes also the visible size, since it uses only button images with size > 2

Here is a picture of the result

https://www.dropbox.com/s/ir0ufzup0bp5nhn/ut-window-control-buttons.png?dl=0

Marco Trevisan (TreviƱo) (3v1n0) wrote :

I would not change this for now (as I'm not totally convinced and being bast UIF).

Also, in this case the way of doing it, instead of changing the PNGs would be to regenerate them at proper size.

You can use a script like the one at https://code.launchpad.net/~3v1n0/ubuntu-themes/windowbuttons-bg-and-padding/+merge/342171

Carlo Lobrano (c-lobrano) wrote :

Understood, and thanks for the script!

Unmerged revisions

617. By Carlo Lobrano on 2018-04-09

Ambiance, Radiance: increased window control buttons size

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 2018-03-28 06:27:00 +0000
3+++ Ambiance/gtk-3.20/gtk-widgets.css 2018-04-09 21:52:54 +0000
4@@ -579,7 +579,7 @@
5 color: @link_color;
6 }
7
8-button separator {
9+button separator {
10 color: shade(@bg_color, 1.30);
11 }
12
13@@ -2750,11 +2750,10 @@
14 padding-right: 0;
15 margin: 0;
16
17- min-width: 20px;
18- min-height: 20px;
19- background-size: 20px 20px;
20- background-image: -gtk-scaled(url("assets/windowbutton.png"),
21- url("assets/windowbutton@2.png"),
22+ min-width: 30px;
23+ min-height: 22px;
24+ background-size: 26px 26px;
25+ background-image: -gtk-scaled(url("assets/windowbutton@2.png"),
26 url("assets/windowbutton@3.png"),
27 url("assets/windowbutton@4.png"));
28 background-repeat: no-repeat;
29@@ -2769,8 +2768,8 @@
30
31 /* keep buttons closer */
32 .titlebar button.titlebutton {
33- margin-left: -3px;
34- margin-right: -3px;
35+ margin-left: -1px;
36+ margin-right: -1px;
37 }
38
39 .titlebar button.titlebutton:first-child {
40@@ -2782,40 +2781,36 @@
41 }
42
43 .titlebar button.titlebutton.close {
44+ margin-right: 4px;
45 color: #323112;
46 -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.25);
47- background-image: -gtk-scaled(url("assets/windowbutton-close.png"),
48- url("assets/windowbutton-close@2.png"),
49+ background-image: -gtk-scaled(url("assets/windowbutton-close@2.png"),
50 url("assets/windowbutton-close@3.png"),
51 url("assets/windowbutton-close@4.png"));
52 }
53
54 .titlebar button.titlebutton.close:hover {
55- background-image: -gtk-scaled(url("assets/windowbutton-close-hover.png"),
56- url("assets/windowbutton-close-hover@2.png"),
57+ background-image: -gtk-scaled(url("assets/windowbutton-close-hover@2.png"),
58 url("assets/windowbutton-close-hover@3.png"),
59 url("assets/windowbutton-close-hover@4.png"));
60 }
61
62 .titlebar button.titlebutton:hover,
63 .titlebar button.titlebutton:backdrop:hover {
64- background-image: -gtk-scaled(url("assets/windowbutton-hover.png"),
65- url("assets/windowbutton-hover@2.png"),
66+ background-image: -gtk-scaled(url("assets/windowbutton-hover@2.png"),
67 url("assets/windowbutton-hover@3.png"),
68 url("assets/windowbutton-hover@4.png"));
69 }
70
71 .titlebar button.titlebutton:active {
72 -gtk-icon-shadow: none;
73- background-image: -gtk-scaled(url("assets/windowbutton-active.png"),
74- url("assets/windowbutton-active@2.png"),
75+ background-image: -gtk-scaled(url("assets/windowbutton-active@2.png"),
76 url("assets/windowbutton-active@3.png"),
77 url("assets/windowbutton-active@4.png"));
78 }
79
80 .titlebar button.titlebutton.close:active {
81- background-image: -gtk-scaled(url("assets/windowbutton-close-active.png"),
82- url("assets/windowbutton-close-active@2.png"),
83+ background-image: -gtk-scaled(url("assets/windowbutton-close-active@2.png"),
84 url("assets/windowbutton-close-active@3.png"),
85 url("assets/windowbutton-close-active@4.png"));
86 }
87@@ -2823,22 +2818,19 @@
88 .titlebar button.titlebutton:backdrop {
89 color: #3d3c37;
90 -gtk-icon-shadow: none;
91- background-image: -gtk-scaled(url("assets/windowbutton-backdrop.png"),
92- url("assets/windowbutton-backdrop@2.png"),
93+ background-image: -gtk-scaled(url("assets/windowbutton-backdrop@2.png"),
94 url("assets/windowbutton-backdrop@3.png"),
95 url("assets/windowbutton-backdrop@4.png"));
96 }
97
98 .titlebar button.titlebutton:hover:backdrop {
99- background-image: -gtk-scaled(url("assets/windowbutton-backdrop-hover.png"),
100- url("assets/windowbutton-backdrop-hover@2.png"),
101+ background-image: -gtk-scaled(url("assets/windowbutton-backdrop-hover@2.png"),
102 url("assets/windowbutton-backdrop-hover@3.png"),
103 url("assets/windowbutton-backdrop-hover@4.png"));
104 }
105
106 .titlebar button.titlebutton:active:backdrop {
107- background-image: -gtk-scaled(url("assets/windowbutton-backdrop-active.png"),
108- url("assets/windowbutton-backdrop-active@2.png"),
109+ background-image: -gtk-scaled(url("assets/windowbutton-backdrop-active@2.png"),
110 url("assets/windowbutton-backdrop-active@3.png"),
111 url("assets/windowbutton-backdrop-active@4.png"));
112 }
113
114=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
115--- Radiance/gtk-3.20/gtk-widgets.css 2018-03-28 06:27:00 +0000
116+++ Radiance/gtk-3.20/gtk-widgets.css 2018-04-09 21:52:54 +0000
117@@ -574,7 +574,7 @@
118 color: @link_color;
119 }
120
121-button separator {
122+button separator {
123 color: shade(@bg_color, 1.30);
124 }
125
126@@ -2749,11 +2749,10 @@
127 padding-right: 0;
128 margin: 0;
129
130- min-width: 20px;
131- min-height: 20px;
132- background-size: 20px 20px;
133- background-image: -gtk-scaled(url("assets/radiance-windowbutton.png"),
134- url("assets/radiance-windowbutton@2.png"),
135+ min-width: 30px;
136+ min-height: 22px;
137+ background-size: 26px 26px;
138+ background-image: -gtk-scaled(url("assets/radiance-windowbutton@2.png"),
139 url("assets/radiance-windowbutton@3.png"),
140 url("assets/radiance-windowbutton@4.png"));
141 background-repeat: no-repeat;
142@@ -2762,8 +2761,8 @@
143
144 /* keep buttons closer */
145 .titlebar button.titlebutton {
146- margin-left: -3px;
147- margin-right: -3px;
148+ margin-left: 2px;
149+ margin-right: 2px;
150 }
151
152 .titlebar button.titlebutton:first-child {
153@@ -2775,40 +2774,36 @@
154 }
155
156 .titlebar button.titlebutton.close {
157+ margin-right: 4px;
158 color: #7f4025;
159 -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.25);
160- background-image: -gtk-scaled(url("assets/radiance-windowbutton-close.png"),
161- url("assets/radiance-windowbutton-close@2.png"),
162+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-close@2.png"),
163 url("assets/radiance-windowbutton-close@3.png"),
164 url("assets/radiance-windowbutton-close@4.png"));
165 }
166
167 .titlebar button.titlebutton.close:hover {
168- background-image: -gtk-scaled(url("assets/radiance-windowbutton-close-hover.png"),
169- url("assets/radiance-windowbutton-close-hover@2.png"),
170+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-close-hover@2.png"),
171 url("assets/radiance-windowbutton-close-hover@3.png"),
172 url("assets/radiance-windowbutton-close-hover@4.png"));
173 }
174
175 .titlebar button.titlebutton:hover,
176 .titlebar button.titlebutton:backdrop:hover {
177- background-image: -gtk-scaled(url("assets/radiance-windowbutton-hover.png"),
178- url("assets/radiance-windowbutton-hover@2.png"),
179+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-hover@2.png"),
180 url("assets/radiance-windowbutton-hover@3.png"),
181 url("assets/radiance-windowbutton-hover@4.png"));
182 }
183
184 .titlebar button.titlebutton:active {
185 -gtk-icon-shadow: none;
186- background-image: -gtk-scaled(url("assets/radiance-windowbutton-active.png"),
187- url("assets/radiance-windowbutton-active@2.png"),
188+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-active@2.png"),
189 url("assets/radiance-windowbutton-active@3.png"),
190 url("assets/radiance-windowbutton-active@4.png"));
191 }
192
193 .titlebar button.titlebutton.close:active {
194- background-image: -gtk-scaled(url("assets/radiance-windowbutton-close-active.png"),
195- url("assets/radiance-windowbutton-close-active@2.png"),
196+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-close-active@2.png"),
197 url("assets/radiance-windowbutton-close-active@3.png"),
198 url("assets/radiance-windowbutton-close-active@4.png"));
199 }
200@@ -2816,22 +2811,19 @@
201 .titlebar button.titlebutton:backdrop {
202 color: #8b8379;
203 -gtk-icon-shadow: none;
204- background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop.png"),
205- url("assets/radiance-windowbutton-backdrop@2.png"),
206+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop@2.png"),
207 url("assets/radiance-windowbutton-backdrop@3.png"),
208 url("assets/radiance-windowbutton-backdrop@4.png"));
209 }
210
211 .titlebar button.titlebutton:hover:backdrop {
212- background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop-hover.png"),
213- url("assets/radiance-windowbutton-backdrop-hover@2.png"),
214+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop-hover@2.png"),
215 url("assets/radiance-windowbutton-backdrop-hover@3.png"),
216 url("assets/radiance-windowbutton-backdrop-hover@4.png"));
217 }
218
219 .titlebar button.titlebutton:active:backdrop {
220- background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop-active.png"),
221- url("assets/radiance-windowbutton-backdrop-active@2.png"),
222+ background-image: -gtk-scaled(url("assets/radiance-windowbutton-backdrop-active@2.png"),
223 url("assets/radiance-windowbutton-backdrop-active@3.png"),
224 url("assets/radiance-windowbutton-backdrop-active@4.png"));
225 }

Subscribers

People subscribed via source and target branches