Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/vertical-linked-buttons-tuning into lp:ubuntu-themes

  1. vertical-linked-buttons-tuning
  2. Merge into trunk
Proposed by Marco Trevisan (Treviño)
Status: Merged
Approved by: Iain Lane
Approved revision: 567
Merged at revision: 564
Proposed branch: lp:~3v1n0/ubuntu-themes/vertical-linked-buttons-tuning
Merge into: lp:ubuntu-themes
Diff against target: 247 lines (+194/-32)
2 files modified
Ambiance/gtk-3.20/gtk-widgets.css (+97/-16)
Radiance/gtk-3.20/gtk-widgets.css (+97/-16)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/vertical-linked-buttons-tuning
Reviewer Review Type Date Requested Status
Iain Lane Approve
Review via email: mp+330958@code.launchpad.net

Commit message

Ambiance,Radiance: fix vertical linked buttons borders, corners and backgrounds

 - Fix border image for buttons in the middle (see gtk widget factory for reference)
 - Use rotated background gradients
 - Use proper border sizes and borders
 - Add a separator between the elements (and remove the wrongly added horizontal one)

To post a comment you must log in.
Revision history for this message
Iain Lane (laney) wrote :

let's see a before/after screenshot please?

looks good I think!

Revision history for this message
Marco Trevisan (Treviño) (3v1n0) wrote :

Here you are: https://imgur.com/a/rUlQL

Revision history for this message
Iain Lane (laney) wrote :

nice

review: Approve

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-09-18 18:24:38 +0000
3+++ Ambiance/gtk-3.20/gtk-widgets.css 2017-09-19 02:27:54 +0000
4@@ -312,22 +312,103 @@
5 box-shadow: none;
6 }
7
8-.linked.vertical button:first-child {
9- border-image-width: 10px 10px 0 10px;
10- border-width: 1px;
11- border-radius: 0;
12-}
13-
14-.linked.vertical button:only-child {
15- border-image-width: 10px;
16- border-width: 1px;
17- border-radius: 0;
18-}
19-
20-.linked.vertical button:last-child {
21- border-image-width: 0 10px 10px 10px;
22- border-width: 1px;
23- border-radius: 0;
24+.linked.vertical button:backdrop:not(:only-child),
25+.linked.vertical button.destructive-action:backdrop:not(:only-child),
26+.linked.vertical button:disabled:not(:only-child),
27+.linked.vertical button.destructive-action:disabled:not(:only-child)
28+{
29+ background-image: inherit;
30+}
31+
32+.linked.vertical button:not(:only-child) {
33+ background-image: -gtk-gradient (linear, left top, right top,
34+ from (shade (@button_bg_color, 1.08)),
35+ color-stop (0.5, @button_bg_color),
36+ to (shade (@button_bg_color, 0.94)));
37+}
38+
39+.linked.vertical button.destructive-action:not(:only-child) {
40+ background-image: -gtk-gradient (linear, left top, right top,
41+ from (shade (@error_bg_color, 1.1)),
42+ color-stop (0.5, @error_bg_color),
43+ to (shade (@error_bg_color, 0.95)));
44+}
45+
46+.linked.vertical button:hover:not(:only-child) {
47+ background-image: -gtk-gradient (linear, left top, right top,
48+ from (shade (@button_bg_color, 1.12)),
49+ color-stop (0.5, @button_bg_color),
50+ to (shade (@button_bg_color, 0.96)));
51+}
52+
53+.linked.vertical button.destructive-action:hover:not(:only-child) {
54+ background-image: -gtk-gradient (linear, left top, right top,
55+ from (shade (@error_bg_color, 1.12)),
56+ color-stop (0.5, @error_bg_color),
57+ to (shade (@error_bg_color, 0.96)));
58+}
59+
60+.linked.vertical button:checked:not(:only-child) {
61+ background-image: -gtk-gradient (linear, left top, right top,
62+ from (#cecece),
63+ to (#e8e8e8));
64+}
65+
66+.linked.vertical button.destructive-action:checked:not(:only-child) {
67+ background-image: -gtk-gradient (linear, left top, right top,
68+ from (shade (@error_bg_color, 0.80)),
69+ to (shade (@error_bg_color, 1.2)));
70+}
71+
72+.linked.vertical button:active:not(:only-child) {
73+ background-image: -gtk-gradient (linear, left top, right top,
74+ from (#dcdcdc),
75+ to (#f3f3f3));
76+}
77+
78+.linked.vertical button.destructive-action:active:not(:only-child) {
79+ background-image: -gtk-gradient (linear, left top, right top,
80+ from (shade (@error_bg_color, 0.87)),
81+ to (shade (@error_bg_color, 1.1)));
82+}
83+
84+.linked.vertical button:checked:disabled:not(:only-child),
85+.linked.vertical button:active:disabled:not(:only-child) {
86+ background-image: -gtk-gradient (linear, left top, right top,
87+ from (#e3e3e3),
88+ to (#f3f3f3));
89+}
90+
91+.linked.vertical button:checked:disabled:backdrop:not(:only-child) {
92+ background-image: -gtk-gradient (linear, left top, right top,
93+ from (mix (#e3e3e3, @bg_color, 0.5)),
94+ to (mix (#f3f3f3, @bg_color, 0.5)));
95+}
96+
97+.linked.vertical button {
98+ box-shadow: none;
99+}
100+
101+.linked.vertical button:not(:last-child) {
102+ box-shadow: inset 0 -1px 0 0 shade (@bg_color, 0.84);
103+}
104+
105+.linked.vertical button:first-child:not(:last-child) {
106+ border-width: 1px 1px 0 1px;
107+ border-radius: 8px 8px 0 0;
108+ border-image-width: 10px 12px 0 12px;
109+}
110+
111+.linked.vertical button:not(:first-child):not(:last-child) {
112+ border-radius: 0;
113+ border-width: 0 1px 0 1px;
114+ border-image-width: 0 12px 0 12px;
115+}
116+
117+.linked.vertical button:last-child:not(:first-child) {
118+ border-radius: 0 0 8px 8px;
119+ border-width: 0 1px 1px 1px;
120+ border-image-width: 0 12px 10px 12px;
121 }
122
123 *:link,
124
125=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
126--- Radiance/gtk-3.20/gtk-widgets.css 2017-09-18 18:24:38 +0000
127+++ Radiance/gtk-3.20/gtk-widgets.css 2017-09-19 02:27:54 +0000
128@@ -311,22 +311,103 @@
129 box-shadow: none;
130 }
131
132-.linked.vertical button:first-child {
133- border-image-width: 10px 10px 0 10px;
134- border-width: 1px;
135- border-radius: 0;
136-}
137-
138-.linked.vertical button:only-child {
139- border-image-width: 10px;
140- border-width: 1px;
141- border-radius: 0;
142-}
143-
144-.linked.vertical button:last-child {
145- border-image-width: 0 10px 10px 10px;
146- border-width: 1px;
147- border-radius: 0;
148+.linked.vertical button:backdrop:not(:only-child),
149+.linked.vertical button.destructive-action:backdrop:not(:only-child),
150+.linked.vertical button:disabled:not(:only-child),
151+.linked.vertical button.destructive-action:disabled:not(:only-child)
152+{
153+ background-image: inherit;
154+}
155+
156+.linked.vertical button:not(:only-child) {
157+ background-image: -gtk-gradient (linear, left top, right top,
158+ from (shade (@button_bg_color, 1.08)),
159+ color-stop (0.5, @button_bg_color),
160+ to (shade (@button_bg_color, 0.94)));
161+}
162+
163+.linked.vertical button.destructive-action:not(:only-child) {
164+ background-image: -gtk-gradient (linear, left top, right top,
165+ from (shade (@error_bg_color, 1.1)),
166+ color-stop (0.5, @error_bg_color),
167+ to (shade (@error_bg_color, 0.95)));
168+}
169+
170+.linked.vertical button:hover:not(:only-child) {
171+ background-image: -gtk-gradient (linear, left top, right top,
172+ from (shade (@button_bg_color, 1.12)),
173+ color-stop (0.5, @button_bg_color),
174+ to (shade (@button_bg_color, 0.96)));
175+}
176+
177+.linked.vertical button.destructive-action:hover:not(:only-child) {
178+ background-image: -gtk-gradient (linear, left top, right top,
179+ from (shade (@error_bg_color, 1.12)),
180+ color-stop (0.5, @error_bg_color),
181+ to (shade (@error_bg_color, 0.96)));
182+}
183+
184+.linked.vertical button:checked:not(:only-child) {
185+ background-image: -gtk-gradient (linear, left top, right top,
186+ from (#cecece),
187+ to (#e8e8e8));
188+}
189+
190+.linked.vertical button.destructive-action:checked:not(:only-child) {
191+ background-image: -gtk-gradient (linear, left top, right top,
192+ from (shade (@error_bg_color, 0.80)),
193+ to (shade (@error_bg_color, 1.2)));
194+}
195+
196+.linked.vertical button:active:not(:only-child) {
197+ background-image: -gtk-gradient (linear, left top, right top,
198+ from (#dcdcdc),
199+ to (#f3f3f3));
200+}
201+
202+.linked.vertical button.destructive-action:active:not(:only-child) {
203+ background-image: -gtk-gradient (linear, left top, right top,
204+ from (shade (@error_bg_color, 0.87)),
205+ to (shade (@error_bg_color, 1.1)));
206+}
207+
208+.linked.vertical button:checked:disabled:not(:only-child),
209+.linked.vertical button:active:disabled:not(:only-child) {
210+ background-image: -gtk-gradient (linear, left top, right top,
211+ from (#e3e3e3),
212+ to (#f3f3f3));
213+}
214+
215+.linked.vertical button:checked:disabled:backdrop:not(:only-child) {
216+ background-image: -gtk-gradient (linear, left top, right top,
217+ from (mix (#e3e3e3, @bg_color, 0.5)),
218+ to (mix (#f3f3f3, @bg_color, 0.5)));
219+}
220+
221+.linked.vertical button {
222+ box-shadow: none;
223+}
224+
225+.linked.vertical button:not(:last-child) {
226+ box-shadow: inset 0 -1px 0 0 shade (@bg_color, 0.84);
227+}
228+
229+.linked.vertical button:first-child:not(:last-child) {
230+ border-width: 1px 1px 0 1px;
231+ border-radius: 8px 8px 0 0;
232+ border-image-width: 10px 12px 0 12px;
233+}
234+
235+.linked.vertical button:not(:first-child):not(:last-child) {
236+ border-radius: 0;
237+ border-width: 0 1px 0 1px;
238+ border-image-width: 0 12px 0 12px;
239+}
240+
241+.linked.vertical button:last-child:not(:first-child) {
242+ border-radius: 0 0 8px 8px;
243+ border-width: 0 1px 1px 1px;
244+ border-image-width: 0 12px 10px 12px;
245 }
246
247 *:link,

Subscribers

People subscribed via source and target branches