Ubuntu theme

Merge lp:~3v1n0/ubuntu-themes/unity-decorations into lp:ubuntu-themes

  1. unity-decorations
  2. Merge into trunk
Proposed by Marco Trevisan (Treviño)
Status: Merged
Approved by: Brandon Schaefer
Approved revision: 352
Merged at revision: 337
Proposed branch: lp:~3v1n0/ubuntu-themes/unity-decorations
Merge into: lp:ubuntu-themes
Diff against target: 368 lines (+197/-36)
8 files modified
Ambiance/gtk-3.0/apps/unity.css (+90/-11)
Ambiance/gtk-3.0/gtk-main.css (+1/-0)
Ambiance/gtk-3.0/gtk-widgets-borders.css (+3/-1)
Ambiance/gtk-3.0/gtk-widgets.css (+4/-4)
Radiance/gtk-3.0/apps/unity.css (+91/-14)
Radiance/gtk-3.0/gtk-widgets-borders-radiance.css (+1/-1)
Radiance/gtk-3.0/gtk-widgets-borders.css (+3/-1)
Radiance/gtk-3.0/gtk-widgets.css (+4/-4)
To merge this branch: bzr merge lp:~3v1n0/ubuntu-themes/unity-decorations
Reviewer Review Type Date Requested Status
Brandon Schaefer (community) Approve
PS Jenkins bot (community) continuous-integration Approve
Review via email: mp+202583@code.launchpad.net

Commit message

Ambiance, Radiance: add UnityDecorations css to match previous metacity themes

Description of the change

Add UnityDecorations theming for Ambiance and Radiance themes, needed by lp:~3v1n0/unity/unity-decorations
Also, use css to theme the menu items instead of assets (nicer corners!)

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:348
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/32/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-amd64-ci/12
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-armhf-ci/12
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-i386-ci/12

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/32/rebuild

review: Approve (continuous-integration)
lp:~3v1n0/ubuntu-themes/unity-decorations updated
349. By Marco Trevisan (Treviño)

Radiance: lick-your-corners mode, draw semi-transparent borders

The border color is the same, but to get to it we mix a semi-transparent border color
with the background color, so that the resulting color will be the same, but our corners
will be even more nice.

Also, force background-color to transparent in backdrop mode

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:350
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/33/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-amd64-ci/13
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-armhf-ci/13
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-i386-ci/13

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/33/rebuild

review: Approve (continuous-integration)
lp:~3v1n0/ubuntu-themes/unity-decorations updated
350. By Marco Trevisan (Treviño)

Ambiance: lick-your-corners mode, draw semi-transparent borders

The border color is the same, but to get to it we mix a semi-transparent border color
with the background color, so that the resulting color will be the same, but our corners
will be even more nice.

Also, force background-color to transparent in backdrop mode

351. By Marco Trevisan (Treviño)

Ambiance: fix the start gradient color of side decorations (normal status)

352. By Marco Trevisan (Treviño)

UnityDecorations: increase the default shadow radius values

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:352
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/34/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-amd64-ci/14
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-armhf-ci/14
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-trusty-i386-ci/14

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/34/rebuild

review: Approve (continuous-integration)
Revision history for this message
Brandon Schaefer (brandontschaefer) wrote :

Looking nice, and works for me :)

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.0/apps/unity.css'
2--- Ambiance/gtk-3.0/apps/unity.css 2012-08-09 17:14:41 +0000
3+++ Ambiance/gtk-3.0/apps/unity.css 2014-01-24 16:13:27 +0000
4@@ -1,5 +1,88 @@
5+/* Decorations */
6+
7+UnityDecoration {
8+ -UnityDecoration-extents: 28px 1px 1px 1px;
9+ -UnityDecoration-input-extents: 10px;
10+
11+ -UnityDecoration-shadow-offset-x: 1px;
12+ -UnityDecoration-shadow-offset-y: 1px;
13+ -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.647);
14+ -UnityDecoration-active-shadow-radius: 15px;
15+ -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.647);
16+ -UnityDecoration-inactive-shadow-radius: 10px;
17+
18+ -UnityDecoration-glow-size: 10px;
19+ -UnityDecoration-glow-color: rgb (221, 72, 20);
20+
21+ -UnityDecoration-title-indent: 10px;
22+ -UnityDecoration-title-fade: 35px;
23+ -UnityDecoration-title-alignment: 0.0;
24+}
25+
26+UnityDecoration.top {
27+ border: 1px solid rgba (0, 1, 8, 0.3176); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */
28+ border-bottom-width: 0;
29+ border-radius: 8px 8px 0 0;
30+ padding: 1px 8px 0 8px;
31+
32+ box-shadow: inset 0 0 transparent, inset 0 0 transparent,
33+ inset 0 1px shade (@dark_bg_color, 1.8), inset 0 0 transparent;
34+
35+ background-color: transparent;
36+ background-clip: border-box;
37+ background-image: -gtk-gradient (linear, left top, left bottom,
38+ from (shade (@dark_bg_color, 1.5)),
39+ to (shade (@dark_bg_color, 1.04)));
40+
41+ color: @dark_fg_color;
42+ text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
43+}
44+
45+UnityDecoration.top:backdrop {
46+ border: 1px solid rgba (14, 13, 0, 0.098); /* @dark_bg_color - shade (#474642, 0.92) */;
47+ border-bottom-width: 0;
48+ background-color: transparent;
49+ background-clip: border-box;
50+ background-image: -gtk-gradient (linear, left top, left bottom,
51+ from (shade (#474642, 0.92)),
52+ to (@dark_bg_color));
53+ box-shadow: inset 0 0 transparent, inset 0 0 transparent,
54+ inset 0 1px #474642, inset 0 0 transparent;
55+ color: #807d78;
56+}
57+
58+UnityDecoration.left,
59+UnityDecoration.right {
60+ background-color: shade (@bg_color, 0.7);
61+ background-size: 1px 70px;
62+ background-repeat: repeat-x;
63+
64+ /* start color: mix of the top border color and bg-image gradient end */
65+ background-image: -gtk-gradient (linear, left top, left bottom,
66+ color-stop (0, #2b2a2a),
67+ color-stop (0.5, #2b2a2a),
68+ color-stop (1, shade (@bg_color, 0.7)));
69+}
70+
71+UnityDecoration.left:backdrop,
72+UnityDecoration.right:backdrop {
73+ /* start color: mix of the top border color and bg-image gradient end */
74+ background-image: -gtk-gradient (linear, left top, left bottom,
75+ color-stop (0, #373632),
76+ color-stop (0.5, #373632),
77+ color-stop (1, shade (@bg_color, 0.7)));
78+}
79+
80+UnityDecoration.bottom {
81+ background-image: none;
82+ background-color: shade (@bg_color, 0.7);
83+}
84+
85+/* Panel Style */
86+
87 UnityPanelWidget,
88 .unity-panel {
89+ background-color: transparent;
90 background-image: -gtk-gradient (linear, left top, left bottom,
91 from (shade (@dark_bg_color, 1.5)),
92 to (shade (@dark_bg_color, 1.04)));
93@@ -8,7 +91,7 @@
94 border-width: 1px 0 0 0;
95
96 color: @dark_fg_color;
97- text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
98+ text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
99 }
100
101 .unity-panel.menubar,
102@@ -18,21 +101,17 @@
103 .unity-panel.menuitem,
104 .unity-panel .menuitem {
105 border-width: 1px 1px 0 1px;
106-
107 icon-shadow: 0 -1px shade (@dark_bg_color, 0.7);
108 }
109
110+.unity-panel.menubar:backdrop,
111+.unity-panel .menubar *:backdrop {
112+ color: @backdrop_dark_fg_color;
113+}
114+
115 .unity-panel.menubar.menuitem:hover,
116 .unity-panel.menubar .menuitem *:hover {
117- border-radius: 7px 7px 0 0;
118- border-width: 1px 1px 0 1px;
119 background-image: -gtk-gradient (linear, left top, left bottom,
120 from (shade (@dark_bg_color, 1.5)),
121 to (shade (@dark_bg_color, 1.11)));
122- border-image: url("../assets/menubaritem.png") 8 10 1 10 / 8px 10px 1px 10px stretch;
123- /*box-shadow: inset 0 -1px shade (@dark_bg_color, 0.95);*/
124- box-shadow: none;
125-
126- color: shade (@dark_fg_color, 1.1);
127- text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
128-}
129\ No newline at end of file
130+}
131
132=== removed file 'Ambiance/gtk-3.0/assets/menubaritem.png'
133Binary files Ambiance/gtk-3.0/assets/menubaritem.png 2012-08-08 13:46:38 +0000 and Ambiance/gtk-3.0/assets/menubaritem.png 1970-01-01 00:00:00 +0000 differ
134=== removed file 'Ambiance/gtk-3.0/assets/radiance-menubaritem.png'
135Binary files Ambiance/gtk-3.0/assets/radiance-menubaritem.png 2012-08-09 16:56:13 +0000 and Ambiance/gtk-3.0/assets/radiance-menubaritem.png 1970-01-01 00:00:00 +0000 differ
136=== modified file 'Ambiance/gtk-3.0/gtk-main.css'
137--- Ambiance/gtk-3.0/gtk-main.css 2013-11-14 17:00:52 +0000
138+++ Ambiance/gtk-3.0/gtk-main.css 2014-01-24 16:13:27 +0000
139@@ -31,6 +31,7 @@
140 @define-color backdrop_fg_color mix (@bg_color, @fg_color, 0.8);
141 @define-color backdrop_text_color mix (@base_color, @text_color, 0.8);
142 @define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
143+/*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
144 @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
145 @define-color backdrop_selected_fg_color @fg_color;
146
147
148=== modified file 'Ambiance/gtk-3.0/gtk-widgets-borders.css'
149--- Ambiance/gtk-3.0/gtk-widgets-borders.css 2013-10-28 16:21:46 +0000
150+++ Ambiance/gtk-3.0/gtk-widgets-borders.css 2014-01-24 16:13:27 +0000
151@@ -145,7 +145,9 @@
152
153 .menubar.menuitem:hover,
154 .menubar .menuitem:hover {
155- border-image: url("assets/menubaritem.png") 8 10 1 10 / 8px 10px 1px 10px stretch;
156+ border: 1px solid #2e2e2c;
157+ border-bottom-width: 0px;
158+ border-radius: 4px 4px 0 0;
159 }
160
161 /*********
162
163=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
164--- Ambiance/gtk-3.0/gtk-widgets.css 2014-01-14 15:53:50 +0000
165+++ Ambiance/gtk-3.0/gtk-widgets.css 2014-01-24 16:13:27 +0000
166@@ -978,13 +978,13 @@
167 ***************/
168 .menubar.menuitem:hover,
169 .menubar .menuitem:hover {
170- border-radius: 4px 4px 0 0;
171- border-width: 1px 1px 0 1px;
172+ background-color: transparent;
173+ background-clip: border-box;
174 background-image: -gtk-gradient (linear, left top, left bottom,
175 from (shade (@dark_bg_color, 1.38)),
176 to (shade (@dark_bg_color, 1.11)));
177- /*box-shadow: inset 0 -1px shade (@dark_bg_color, 0.95);*/
178- box-shadow: none;
179+
180+ box-shadow: inset 0 1px 1px 0 shade (@dark_bg_color, 1.8);
181
182 color: shade (@dark_fg_color, 1.1);
183 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
184
185=== modified file 'Radiance/gtk-3.0/apps/unity.css'
186--- Radiance/gtk-3.0/apps/unity.css 2012-08-09 17:14:41 +0000
187+++ Radiance/gtk-3.0/apps/unity.css 2014-01-24 16:13:27 +0000
188@@ -1,14 +1,100 @@
189+/* Decorations */
190+
191+UnityDecoration {
192+ -UnityDecoration-extents: 28px 1px 1px 1px;
193+ -UnityDecoration-input-extents: 10px;
194+
195+ -UnityDecoration-shadow-offset-x: 1px;
196+ -UnityDecoration-shadow-offset-y: 1px;
197+ -UnityDecoration-active-shadow-color: rgba (0, 0, 0, 0.647);
198+ -UnityDecoration-active-shadow-radius: 15px;
199+ -UnityDecoration-inactive-shadow-color: rgba (0, 0, 0, 0.647);
200+ -UnityDecoration-inactive-shadow-radius: 10px;
201+
202+ -UnityDecoration-glow-size: 10px;
203+ -UnityDecoration-glow-color: rgb (221, 72, 20);
204+
205+ -UnityDecoration-title-indent: 10px;
206+ -UnityDecoration-title-fade: 35px;
207+ -UnityDecoration-title-alignment: 0.0;
208+}
209+
210+UnityDecoration.top {
211+ border: 1px solid rgba (72, 33, 0, 0.3568); /* shade (@dark_bg_color, 0.8) - shade (#edebe6, 1.06) */
212+ border-bottom-width: 0;
213+ border-radius: 8px 8px 0 0;
214+ padding: 1px 8px 0 8px;
215+
216+ box-shadow: inset 0 0 transparent, inset 0 0 transparent,
217+ inset 0 1px shade (#edebe6, 1.08), inset 0 0 transparent;
218+
219+ background-color: transparent;
220+ background-clip: border-box;
221+ background-image: -gtk-gradient (linear, left top, left bottom,
222+ from (shade (#edebe6, 1.06)),
223+ to (@dark_bg_color));
224+
225+ color: shade (@dark_bg_color, 0.4);
226+ text-shadow: 1px 0 1px shade (@dark_bg_color, 1.06), -1px 0 1px shade (@dark_bg_color, 1.06),
227+ 0 1px 1px shade (@dark_bg_color, 1.06), 0 -1px 1px shade (@dark_bg_color, 1.06);
228+}
229+
230+UnityDecoration.top:backdrop {
231+ border: 1px solid rgba (74, 29, 0, 0.2784); /* shade (@dark_bg_color, 0.8) - shade (#edebe6, 0.96) */
232+ border-bottom-width: 0;
233+ background-color: transparent;
234+ background-clip: border-box;
235+ background-image: -gtk-gradient (linear, left top, left bottom,
236+ from (shade (#edebe6, 0.96)),
237+ to (@dark_bg_color));
238+ box-shadow: inset 0 0 transparent, inset 0 0 transparent,
239+ inset 0 1px shade (#edebe6, 0.98), inset 0 0 transparent;
240+ color: #a39e9a;
241+ text-shadow: 1px 0 1px shade (@dark_bg_color, 1.08), -1px 0 1px shade (@dark_bg_color, 1.08),
242+ 0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08);
243+}
244+
245+UnityDecoration.left,
246+UnityDecoration.right {
247+ background-color: shade (@bg_color, 0.7);
248+ background-size: 1px 70px;
249+ background-repeat: repeat-x;
250+
251+ /* start color: mix of the top border color and bg-image gradient end */
252+ background-image: -gtk-gradient (linear, left top, left bottom,
253+ color-stop (0, #a89686),
254+ color-stop (0.5, #a89686),
255+ color-stop (1, shade (@bg_color, 0.7)));
256+}
257+
258+UnityDecoration.left:backdrop,
259+UnityDecoration.right:backdrop {
260+ /* start color: mix of the top border color and bg-image gradient end */
261+ background-image: -gtk-gradient (linear, left top, left bottom,
262+ color-stop (0, #b5a395),
263+ color-stop (0.5, #b5a395),
264+ color-stop (1, shade (@bg_color, 0.7)));
265+}
266+
267+UnityDecoration.bottom {
268+ background-image: none;
269+ background-color: shade (@bg_color, 0.7);
270+}
271+
272+/* Panel Style */
273+
274 UnityPanelWidget,
275 .unity-panel {
276 background-image: -gtk-gradient (linear, left top, left bottom,
277- from (shade (@dark_bg_color, 1.3)),
278- to (shade (@dark_bg_color, 1.0)));
279- border-top-color: shade (@dark_bg_color, 1.4);
280+ from (shade (#edebe6, 1.06)),
281+ to (@dark_bg_color));
282+ border-top-color: shade (#edebe6, 1.08);
283 border-style: solid;
284 border-width: 1px 0 0 0;
285
286 color: @dark_fg_color;
287- text-shadow: 0 1px shade (@dark_bg_color, 1.1);
288+ text-shadow: 1px 0 1px shade (@dark_bg_color, 1.06), -1px 0 1px shade (@dark_bg_color, 1.06),
289+ 0 1px 1px shade (@dark_bg_color, 1.06), 0 -1px 1px shade (@dark_bg_color, 1.06);
290 }
291
292 .unity-panel.menubar,
293@@ -18,21 +104,12 @@
294 .unity-panel.menuitem,
295 .unity-panel .menuitem {
296 border-width: 1px 1px 0 1px;
297-
298- icon-shadow: 0 1px shade (@dark_bg_color, 1.06);
299+ icon-shadow: 0 -1px shade (@dark_bg_color, 1.06);
300 }
301
302 .unity-panel.menubar.menuitem:hover,
303 .unity-panel.menubar .menuitem *:hover {
304- border-radius: 7px 7px 0 0;
305- border-width: 1px 1px 0 1px;
306 background-image: -gtk-gradient (linear, left top, left bottom,
307 from (shade (@dark_bg_color, 1.5)),
308 to (shade (@dark_bg_color, 1.02)));
309- border-image: url("../assets/radiance-menubaritem.png") 8 10 1 10 / 8px 10px 1px 10px stretch;
310- /*box-shadow: inset 0 -1px shade (@dark_bg_color, 0.95);*/
311- box-shadow: none;
312-
313- color: @fg_color;
314- text-shadow: 0 1px shade (@dark_bg_color, 1.1);
315 }
316
317=== removed file 'Radiance/gtk-3.0/assets/menubaritem.png'
318Binary files Radiance/gtk-3.0/assets/menubaritem.png 2012-08-08 13:46:38 +0000 and Radiance/gtk-3.0/assets/menubaritem.png 1970-01-01 00:00:00 +0000 differ
319=== removed file 'Radiance/gtk-3.0/assets/radiance-menubaritem.png'
320Binary files Radiance/gtk-3.0/assets/radiance-menubaritem.png 2012-08-08 13:46:38 +0000 and Radiance/gtk-3.0/assets/radiance-menubaritem.png 1970-01-01 00:00:00 +0000 differ
321=== modified file 'Radiance/gtk-3.0/gtk-widgets-borders-radiance.css'
322--- Radiance/gtk-3.0/gtk-widgets-borders-radiance.css 2013-08-01 22:14:12 +0000
323+++ Radiance/gtk-3.0/gtk-widgets-borders-radiance.css 2014-01-24 16:13:27 +0000
324@@ -69,5 +69,5 @@
325
326 .menubar.menuitem:hover,
327 .menubar .menuitem:hover {
328- border-image: url("assets/radiance-menubaritem.png") 8 10 1 10 / 8px 10px 1px 10px stretch;
329+ border-color: #b8ab9c;
330 }
331\ No newline at end of file
332
333=== modified file 'Radiance/gtk-3.0/gtk-widgets-borders.css'
334--- Radiance/gtk-3.0/gtk-widgets-borders.css 2013-10-28 16:34:07 +0000
335+++ Radiance/gtk-3.0/gtk-widgets-borders.css 2014-01-24 16:13:27 +0000
336@@ -148,7 +148,9 @@
337
338 .menubar.menuitem:hover,
339 .menubar .menuitem:hover {
340- border-image: url("assets/menubaritem.png") 8 10 1 10 / 8px 10px 1px 10px stretch;
341+ border: 1px solid #2e2e2c;
342+ border-bottom-width: 0px;
343+ border-radius: 4px 4px 0 0;
344 }
345
346 /*********
347
348=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
349--- Radiance/gtk-3.0/gtk-widgets.css 2014-01-10 16:08:02 +0000
350+++ Radiance/gtk-3.0/gtk-widgets.css 2014-01-24 16:13:27 +0000
351@@ -980,13 +980,13 @@
352 ***************/
353 .menubar.menuitem:hover,
354 .menubar .menuitem:hover {
355- border-radius: 4px 4px 0 0;
356- border-width: 1px 1px 0 1px;
357+ background-color: transparent;
358+ background-clip: border-box;
359 background-image: -gtk-gradient (linear, left top, left bottom,
360 from (shade (@dark_bg_color, 1.38)),
361 to (shade (@dark_bg_color, 1.11)));
362- /*box-shadow: inset 0 -1px shade (@dark_bg_color, 0.95);*/
363- box-shadow: none;
364+
365+ box-shadow: inset 0 1px 1px 0 shade (@dark_bg_color, 1.8);
366
367 color: shade (@dark_fg_color, 1.1);
368 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);

Subscribers

People subscribed via source and target branches