Merge lp:~larsu/ubuntu-themes/three-twelve into lp:ubuntu-themes

Proposed by Lars Karlitski on 2014-07-08
Status: Merged
Approved by: Sebastien Bacher on 2014-07-11
Approved revision: 388
Merged at revision: 389
Proposed branch: lp:~larsu/ubuntu-themes/three-twelve
Merge into: lp:ubuntu-themes
Diff against target: 504 lines (+189/-162)
6 files modified
Ambiance/gtk-3.0/apps/gedit.css (+0/-1)
Ambiance/gtk-3.0/apps/nautilus.css (+4/-0)
Ambiance/gtk-3.0/gtk-widgets.css (+91/-80)
Radiance/gtk-3.0/apps/gedit.css (+0/-1)
Radiance/gtk-3.0/apps/nautilus.css (+4/-0)
Radiance/gtk-3.0/gtk-widgets.css (+90/-80)
To merge this branch: bzr merge lp:~larsu/ubuntu-themes/three-twelve
Reviewer Review Type Date Requested Status
Sebastien Bacher 2014-07-08 Approve on 2014-07-11
PS Jenkins bot (community) continuous-integration Approve on 2014-07-10
Review via email: mp+225982@code.launchpad.net

Commit message

Fixes required by the 3.12 update

Unify notebook borders and paddings to get rid of the border around tab bars (on notebooks and stand-alone, such as in gedit and gnome-terminal).

Also, style header bars similarly to window title bars, but take care that header bars that are used as tool bars keep the same look as tool bars.

Description of the change

Fixes required by the 3.12 update

Unify notebook borders and paddings to get rid of the border around tab bars (on notebooks and stand-alone, such as in gedit and gnome-terminal).

Also, style header bars similarly to window title bars, but take care that header bars that are used as tool bars keep the same look as tool bars.

I hope this is okay as a single commit. Let me know if you prefer the headerbar stuff in a separate commit.

To post a comment you must log in.
lp:~larsu/ubuntu-themes/three-twelve updated on 2014-07-10
387. By Lars Karlitski on 2014-07-10

Unset border-radius for header bars that are used as tool bars

388. By Lars Karlitski on 2014-07-10

Nautilus: add padding to toolbar buttons

Lars Karlitski (larsu) wrote :

Updated to be able to get rid of nautilus' ubuntu_title_bar_css.patch (see lp:~larsu/nautilus/remove-titlebar-css-patch ).

Sebastien Bacher (seb128) wrote :

Looks good, thanks

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/gedit.css'
2--- Ambiance/gtk-3.0/apps/gedit.css 2014-01-15 13:42:18 +0000
3+++ Ambiance/gtk-3.0/apps/gedit.css 2014-07-10 15:07:43 +0000
4@@ -14,7 +14,6 @@
5 }
6
7 GeditWindow .notebook {
8- padding: 1px;
9 border-radius: 1px;
10 }
11
12
13=== modified file 'Ambiance/gtk-3.0/apps/nautilus.css'
14--- Ambiance/gtk-3.0/apps/nautilus.css 2013-05-22 17:18:39 +0000
15+++ Ambiance/gtk-3.0/apps/nautilus.css 2014-07-10 15:07:43 +0000
16@@ -105,6 +105,10 @@
17 -GtkButton-inner-border: 0;
18 }
19
20+NautilusWindow .header-bar .button {
21+ padding: 9px;
22+}
23+
24 /* sidebar */
25 NautilusWindow .sidebar,
26 NautilusWindow .sidebar .view {
27
28=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
29--- Ambiance/gtk-3.0/gtk-widgets.css 2014-06-18 12:00:26 +0000
30+++ Ambiance/gtk-3.0/gtk-widgets.css 2014-07-10 15:07:43 +0000
31@@ -117,14 +117,6 @@
32 box-shadow: inset -1px 0 shade (@bg_color, 0.94);
33 }
34
35-/**************
36- * background *
37- **************/
38-.background {
39- background-color: @bg_color;
40- border-width: 0;
41-}
42-
43 /**********
44 * button *
45 **********/
46@@ -1178,101 +1170,66 @@
47 /************
48 * notebook *
49 ************/
50-.notebook {
51- background-color: shade (@bg_color, 1.02);
52- background-image: none;
53- border-radius: 3px;
54- padding: 2px;
55- background-clip: border-box;
56- border-color: shade (@bg_color, 0.82);
57- border-width: 1px;
58- border-style: solid;
59- /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
60- /*font-weight: 300;*/
61-}
62-
63-.notebook tab {
64- background-image: none;
65- background-color: transparent;
66- border-style: solid;
67- border-image: -gtk-gradient (linear, left top, left bottom,
68- from (alpha (shade (@bg_color, 0.9), 0.0)),
69- to (shade (@bg_color, 0.9))) 1;
70- border-image-width: 0 1px;
71- border-color: transparent;
72- border-width: 0;
73- box-shadow: none;
74- /*color: shade (@fg_color, 1.2);*/
75-}
76-
77+.notebook tab.top { padding: 4px 6px 2px 6px; }
78+.notebook tab.top:active { padding-bottom: 3px; }
79+.notebook tab.bottom { padding: 2px 6px 4px 6px; }
80+.notebook tab.bottom:active { padding-top: 3px; }
81+.notebook tab.left { padding: 2px 4px 2px 6px; }
82+.notebook tab.left:active { padding-right: 5px; }
83+.notebook tab.right { padding: 2px 6px 2px 4px; }
84+.notebook tab.right:active { padding-left: 5px; }
85+
86+/* give active tab a background, as it might be dragged across of others when reordering */
87 .notebook tab:active {
88+ background-color: @bg_color;
89+}
90+
91+.notebook.header {
92+ border-width: 0; /* set below depending on position of tab bar */
93 border-color: shade (@bg_color, 0.82);
94 border-style: solid;
95- border-width: 1px;
96- background-color: shade (@bg_color, 1.02);
97- background-image: none;
98- /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
99-
100- color: @fg_color;
101-}
102-
103-.notebook tab GtkLabel {
104- /*padding: 1px;*/
105- padding: 1px 1px 2px 1px;
106-}
107-
108-.notebook tab {
109- color: shade (@bg_color, 0.48);
110-}
111-
112-.notebook tab.top:active {
113- padding: 3px 7px 1px 7px;
114-}
115+}
116+
117+/* Draw a border between tabs and content ... */
118+.notebook.header.top { border-bottom-width: 1px; }
119+.notebook.header.right { border-left-width: 1px; }
120+.notebook.header.left { border-right-width: 1px; }
121+.notebook.header.bottom { border-top-width: 1px; }
122+
123+/* ... unless the content is in a frame (thus having a border itself */
124+.notebook.header.frame.top { border: none; }
125+.notebook.header.frame.right { border: none; }
126+.notebook.header.frame.right { border: none; }
127+.notebook.header.frame.bottom { border: none; }
128
129 .notebook tab.top {
130- padding: 2px 5px 0 5px;
131-}
132-
133-.notebook tab.right:active {
134- padding: 4px 6px 4px 1px;
135+ border-image: -gtk-gradient (linear, left top, left bottom,
136+ from (alpha (shade (@bg_color, 0.9), 0.0)),
137+ to (shade (@bg_color, 0.9))) 1;
138+ border-image-width: 0 1px;
139 }
140
141 .notebook tab.right {
142- padding: 3px 4px 3px 0;
143 border-image: -gtk-gradient (linear, right top, left top,
144 from (alpha (shade (@bg_color, 0.9), 0.0)),
145 to (shade (@bg_color, 0.9))) 1;
146 border-image-width: 1px 0;
147 }
148
149-.notebook tab.bottom:active {
150- padding: 1px 7px 4px 7px;
151+.notebook tab.left {
152+ border-image: -gtk-gradient (linear, left top, right top,
153+ from (alpha (shade (@bg_color, 0.9), 0.0)),
154+ to (shade (@bg_color, 0.9))) 1;
155+ border-image-width: 1px 0;
156 }
157
158 .notebook tab.bottom {
159- padding: 0 5px 3px 5px;
160 border-image: -gtk-gradient (linear, left bottom, left top,
161 from (alpha (shade (@bg_color, 0.9), 0.0)),
162 to (shade (@bg_color, 0.9))) 1;
163 border-image-width: 0 1px;
164 }
165
166-.notebook tab.left:active {
167- padding: 4px 1px 4px 6px;
168-}
169-
170-.notebook tab.left {
171- padding: 3px 0 3px 4px;
172- border-image: -gtk-gradient (linear, left top, right top,
173- from (alpha (shade (@bg_color, 0.9), 0.0)),
174- to (shade (@bg_color, 0.9))) 1;
175- border-image-width: 1px 0;
176-}
177-
178-.notebook tab .button {
179- padding: 0;
180-}
181-
182 .notebook GtkDrawingArea {
183 background-color: shade (@bg_color, 1.02);
184 }
185@@ -1903,6 +1860,59 @@
186 background-color: @base_color;
187 }
188
189+/*
190+ * Header Bars
191+ *
192+ * The following rules only style header bars when they are used as a window's
193+ * titlebar widget (i.e., they have .titlebar set as well).
194+ *
195+ * Some applications reuse their header bar as a primary toolbar on desktops
196+ * that prefer showing traditional title bars. The rules for those are further
197+ * down grouped with normal toolbars.
198+ */
199+.titlebar.header-bar {
200+ padding: 2px;
201+ background-image: -gtk-gradient (linear, left top, left bottom,
202+ from (shade (@dark_bg_color, 1.5)),
203+ to (@dark_bg_color));
204+ border-color: shade (@dark_bg_color, 1.5);
205+ border-style: solid;
206+ border-width: 1px 0 0 0;
207+ border-radius: 7px 7px 0 0;
208+
209+ color: @dark_fg_color;
210+ text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
211+
212+ box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
213+}
214+
215+.titlebar.header-bar .title {
216+ font: bold;
217+}
218+
219+.titlebar.header-bar:backdrop {
220+ color: @backdrop_fg_color;
221+ background-image: none;
222+ background-color: @dark_bg_color;
223+ border-top-color: @dark_bg_color;
224+ box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
225+}
226+
227+.maximized .titlebar.header-bar {
228+ border-radius: 0;
229+ border: none;
230+}
231+
232+.titlebar.header-bar .button.titlebutton {
233+ background-color: transparent;
234+ border-image-width: 0;
235+ box-shadow: none;
236+}
237+
238+.titlebar.header-bar .button.titlebutton:hover {
239+ border-image-width: 12px;
240+}
241+
242 /***********
243 * toolbar *
244 ***********/
245@@ -1938,6 +1948,7 @@
246 border-top-color: shade (@dark_bg_color, 1.09);
247 border-style: solid;
248 border-width: 1px 0 1px 0;
249+ border-radius: 0;
250
251 color: @dark_fg_color;
252 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
253
254=== modified file 'Radiance/gtk-3.0/apps/gedit.css'
255--- Radiance/gtk-3.0/apps/gedit.css 2014-01-15 13:42:18 +0000
256+++ Radiance/gtk-3.0/apps/gedit.css 2014-07-10 15:07:43 +0000
257@@ -14,7 +14,6 @@
258 }
259
260 GeditWindow .notebook {
261- padding: 1px;
262 border-radius: 1px;
263 }
264
265
266=== modified file 'Radiance/gtk-3.0/apps/nautilus.css'
267--- Radiance/gtk-3.0/apps/nautilus.css 2013-05-22 17:18:39 +0000
268+++ Radiance/gtk-3.0/apps/nautilus.css 2014-07-10 15:07:43 +0000
269@@ -105,6 +105,10 @@
270 -GtkButton-inner-border: 0;
271 }
272
273+NautilusWindow .header-bar .button {
274+ padding: 9px;
275+}
276+
277 /* sidebar */
278 NautilusWindow .sidebar,
279 NautilusWindow .sidebar .view {
280
281=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
282--- Radiance/gtk-3.0/gtk-widgets.css 2014-06-18 12:00:26 +0000
283+++ Radiance/gtk-3.0/gtk-widgets.css 2014-07-10 15:07:43 +0000
284@@ -116,14 +116,6 @@
285 box-shadow: inset -1px 0 shade (@bg_color, 0.94);
286 }
287
288-/**************
289- * background *
290- **************/
291-.background {
292- background-color: @bg_color;
293- border-width: 0;
294-}
295-
296 /**********
297 * button *
298 **********/
299@@ -1181,101 +1173,66 @@
300 /************
301 * notebook *
302 ************/
303-.notebook {
304- background-color: shade (@bg_color, 1.02);
305- background-image: none;
306- border-radius: 3px;
307- padding: 2px;
308- background-clip: border-box;
309- border-color: shade (@bg_color, 0.82);
310- border-width: 1px;
311- border-style: solid;
312- /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
313- /*font-weight: 300;*/
314-}
315-
316-.notebook tab {
317- background-image: none;
318- background-color: transparent;
319- border-style: solid;
320- border-image: -gtk-gradient (linear, left top, left bottom,
321- from (alpha (shade (@bg_color, 0.9), 0.0)),
322- to (shade (@bg_color, 0.9))) 1;
323- border-image-width: 0 1px;
324- border-color: transparent;
325- border-width: 0;
326- box-shadow: none;
327- /*color: shade (@fg_color, 1.2);*/
328-}
329-
330+.notebook tab.top { padding: 4px 6px 2px 6px; }
331+.notebook tab.top:active { padding-bottom: 3px; }
332+.notebook tab.bottom { padding: 2px 6px 4px 6px; }
333+.notebook tab.bottom:active { padding-top: 3px; }
334+.notebook tab.left { padding: 2px 4px 2px 6px; }
335+.notebook tab.left:active { padding-right: 5px; }
336+.notebook tab.right { padding: 2px 6px 2px 4px; }
337+.notebook tab.right:active { padding-left: 5px; }
338+
339+/* give active tab a background, as it might be dragged across of others when reordering */
340 .notebook tab:active {
341+ background-color: @bg_color;
342+}
343+
344+.notebook.header {
345+ border-width: 0; /* set below depending on position of tab bar */
346 border-color: shade (@bg_color, 0.82);
347 border-style: solid;
348- border-width: 1px;
349- background-color: shade (@bg_color, 1.02);
350- background-image: none;
351- /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/
352-
353- color: @fg_color;
354-}
355-
356-.notebook tab GtkLabel {
357- /*padding: 1px;*/
358- padding: 1px 1px 2px 1px;
359-}
360-
361-.notebook tab {
362- color: shade (@bg_color, 0.48);
363-}
364-
365-.notebook tab.top:active {
366- padding: 3px 7px 1px 7px;
367-}
368+}
369+
370+/* Draw a border between tabs and content ... */
371+.notebook.header.top { border-bottom-width: 1px; }
372+.notebook.header.right { border-left-width: 1px; }
373+.notebook.header.left { border-right-width: 1px; }
374+.notebook.header.bottom { border-top-width: 1px; }
375+
376+/* ... unless the content is in a frame (thus having a border itself */
377+.notebook.header.frame.top { border: none; }
378+.notebook.header.frame.right { border: none; }
379+.notebook.header.frame.right { border: none; }
380+.notebook.header.frame.bottom { border: none; }
381
382 .notebook tab.top {
383- padding: 2px 5px 0 5px;
384-}
385-
386-.notebook tab.right:active {
387- padding: 4px 6px 4px 1px;
388+ border-image: -gtk-gradient (linear, left top, left bottom,
389+ from (alpha (shade (@bg_color, 0.9), 0.0)),
390+ to (shade (@bg_color, 0.9))) 1;
391+ border-image-width: 0 1px;
392 }
393
394 .notebook tab.right {
395- padding: 3px 4px 3px 0;
396 border-image: -gtk-gradient (linear, right top, left top,
397 from (alpha (shade (@bg_color, 0.9), 0.0)),
398 to (shade (@bg_color, 0.9))) 1;
399 border-image-width: 1px 0;
400 }
401
402-.notebook tab.bottom:active {
403- padding: 1px 7px 4px 7px;
404+.notebook tab.left {
405+ border-image: -gtk-gradient (linear, left top, right top,
406+ from (alpha (shade (@bg_color, 0.9), 0.0)),
407+ to (shade (@bg_color, 0.9))) 1;
408+ border-image-width: 1px 0;
409 }
410
411 .notebook tab.bottom {
412- padding: 0 5px 3px 5px;
413 border-image: -gtk-gradient (linear, left bottom, left top,
414 from (alpha (shade (@bg_color, 0.9), 0.0)),
415 to (shade (@bg_color, 0.9))) 1;
416 border-image-width: 0 1px;
417 }
418
419-.notebook tab.left:active {
420- padding: 4px 1px 4px 6px;
421-}
422-
423-.notebook tab.left {
424- padding: 3px 0 3px 4px;
425- border-image: -gtk-gradient (linear, left top, right top,
426- from (alpha (shade (@bg_color, 0.9), 0.0)),
427- to (shade (@bg_color, 0.9))) 1;
428- border-image-width: 1px 0;
429-}
430-
431-.notebook tab .button {
432- padding: 0;
433-}
434-
435 .notebook GtkDrawingArea {
436 background-color: shade (@bg_color, 1.02);
437 }
438@@ -1913,6 +1870,58 @@
439 background-color: @base_color;
440 }
441
442+/*
443+ * Header Bars
444+ *
445+ * The following rules only style header bars when they are used as a window's
446+ * titlebar widget (i.e., they have .titlebar set as well).
447+ *
448+ * Some applications reuse their header bar as a primary toolbar on desktops
449+ * that prefer showing traditional title bars. The rules for those are further
450+ * down grouped with normal toolbars.
451+ */
452+.titlebar.header-bar {
453+ padding: 2px;
454+ background-image: -gtk-gradient (linear, left top, left bottom,
455+ from (shade (@dark_bg_color, 1.5)),
456+ to (@dark_bg_color));
457+ border-color: shade (@dark_bg_color, 1.5);
458+ border-style: solid;
459+ border-width: 1px 0 0 0;
460+ border-radius: 7px 7px 0 0;
461+
462+ color: @dark_fg_color;
463+
464+ box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
465+}
466+
467+.titlebar.header-bar .title {
468+ font: bold;
469+}
470+
471+.titlebar.header-bar:backdrop {
472+ color: @backdrop_fg_color;
473+ background-image: none;
474+ background-color: @dark_bg_color;
475+ border-top-color: @dark_bg_color;
476+}
477+
478+.maximized .titlebar.header-bar {
479+ border-radius: 0;
480+ border: none;
481+}
482+
483+.titlebar.header-bar .button.titlebutton {
484+ background-color: transparent;
485+ border-image-width: 0;
486+ box-shadow: none;
487+}
488+
489+.titlebar.header-bar .button.titlebutton:hover {
490+ border-image-width: 12px;
491+}
492+
493+
494 /***********
495 * toolbar *
496 ***********/
497@@ -1948,6 +1957,7 @@
498 border-top-color: shade (@dark_bg_color, 1.09);
499 border-style: solid;
500 border-width: 1px 0 1px 0;
501+ border-radius: 0;
502
503 color: @dark_fg_color;
504 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);

Subscribers

People subscribed via source and target branches