Ubuntu theme

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

  1. three-twelve
  2. Merge into trunk
Proposed by Lars Karlitski
Status: Merged
Approved by: Sebastien Bacher
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 Approve
PS Jenkins bot (community) continuous-integration Approve
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.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :

PASSED: Continuous integration, rev:386
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/70/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-amd64-ci/9
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-armhf-ci/9
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-i386-ci/9

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

review: Approve (continuous-integration)
lp:~larsu/ubuntu-themes/three-twelve updated
387. By Lars Karlitski

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

388. By Lars Karlitski

Nautilus: add padding to toolbar buttons

Revision history for this message
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 ).

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

PASSED: Continuous integration, rev:388
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/71/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-amd64-ci/10
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-armhf-ci/10
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-utopic-i386-ci/10

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

review: Approve (continuous-integration)
Revision history for this message
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
=== modified file 'Ambiance/gtk-3.0/apps/gedit.css'
--- Ambiance/gtk-3.0/apps/gedit.css 2014-01-15 13:42:18 +0000
+++ Ambiance/gtk-3.0/apps/gedit.css 2014-07-10 15:07:43 +0000
@@ -14,7 +14,6 @@
14}14}
1515
16GeditWindow .notebook {16GeditWindow .notebook {
17 padding: 1px;
18 border-radius: 1px;17 border-radius: 1px;
19}18}
2019
2120
=== modified file 'Ambiance/gtk-3.0/apps/nautilus.css'
--- Ambiance/gtk-3.0/apps/nautilus.css 2013-05-22 17:18:39 +0000
+++ Ambiance/gtk-3.0/apps/nautilus.css 2014-07-10 15:07:43 +0000
@@ -105,6 +105,10 @@
105 -GtkButton-inner-border: 0;105 -GtkButton-inner-border: 0;
106}106}
107107
108NautilusWindow .header-bar .button {
109 padding: 9px;
110}
111
108/* sidebar */112/* sidebar */
109NautilusWindow .sidebar,113NautilusWindow .sidebar,
110NautilusWindow .sidebar .view {114NautilusWindow .sidebar .view {
111115
=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
--- Ambiance/gtk-3.0/gtk-widgets.css 2014-06-18 12:00:26 +0000
+++ Ambiance/gtk-3.0/gtk-widgets.css 2014-07-10 15:07:43 +0000
@@ -117,14 +117,6 @@
117 box-shadow: inset -1px 0 shade (@bg_color, 0.94);117 box-shadow: inset -1px 0 shade (@bg_color, 0.94);
118}118}
119119
120/**************
121 * background *
122 **************/
123.background {
124 background-color: @bg_color;
125 border-width: 0;
126}
127
128/**********120/**********
129 * button *121 * button *
130 **********/122 **********/
@@ -1178,101 +1170,66 @@
1178/************1170/************
1179 * notebook *1171 * notebook *
1180 ************/1172 ************/
1181.notebook {1173.notebook tab.top { padding: 4px 6px 2px 6px; }
1182 background-color: shade (@bg_color, 1.02);1174.notebook tab.top:active { padding-bottom: 3px; }
1183 background-image: none;1175.notebook tab.bottom { padding: 2px 6px 4px 6px; }
1184 border-radius: 3px;1176.notebook tab.bottom:active { padding-top: 3px; }
1185 padding: 2px;1177.notebook tab.left { padding: 2px 4px 2px 6px; }
1186 background-clip: border-box;1178.notebook tab.left:active { padding-right: 5px; }
1187 border-color: shade (@bg_color, 0.82);1179.notebook tab.right { padding: 2px 6px 2px 4px; }
1188 border-width: 1px;1180.notebook tab.right:active { padding-left: 5px; }
1189 border-style: solid;1181
1190 /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/1182/* give active tab a background, as it might be dragged across of others when reordering */
1191 /*font-weight: 300;*/
1192}
1193
1194.notebook tab {
1195 background-image: none;
1196 background-color: transparent;
1197 border-style: solid;
1198 border-image: -gtk-gradient (linear, left top, left bottom,
1199 from (alpha (shade (@bg_color, 0.9), 0.0)),
1200 to (shade (@bg_color, 0.9))) 1;
1201 border-image-width: 0 1px;
1202 border-color: transparent;
1203 border-width: 0;
1204 box-shadow: none;
1205 /*color: shade (@fg_color, 1.2);*/
1206}
1207
1208.notebook tab:active {1183.notebook tab:active {
1184 background-color: @bg_color;
1185}
1186
1187.notebook.header {
1188 border-width: 0; /* set below depending on position of tab bar */
1209 border-color: shade (@bg_color, 0.82);1189 border-color: shade (@bg_color, 0.82);
1210 border-style: solid;1190 border-style: solid;
1211 border-width: 1px;1191}
1212 background-color: shade (@bg_color, 1.02);1192
1213 background-image: none;1193/* Draw a border between tabs and content ... */
1214 /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/1194.notebook.header.top { border-bottom-width: 1px; }
12151195.notebook.header.right { border-left-width: 1px; }
1216 color: @fg_color;1196.notebook.header.left { border-right-width: 1px; }
1217}1197.notebook.header.bottom { border-top-width: 1px; }
12181198
1219.notebook tab GtkLabel {1199/* ... unless the content is in a frame (thus having a border itself */
1220 /*padding: 1px;*/1200.notebook.header.frame.top { border: none; }
1221 padding: 1px 1px 2px 1px;1201.notebook.header.frame.right { border: none; }
1222}1202.notebook.header.frame.right { border: none; }
12231203.notebook.header.frame.bottom { border: none; }
1224.notebook tab {
1225 color: shade (@bg_color, 0.48);
1226}
1227
1228.notebook tab.top:active {
1229 padding: 3px 7px 1px 7px;
1230}
12311204
1232.notebook tab.top {1205.notebook tab.top {
1233 padding: 2px 5px 0 5px;1206 border-image: -gtk-gradient (linear, left top, left bottom,
1234}1207 from (alpha (shade (@bg_color, 0.9), 0.0)),
12351208 to (shade (@bg_color, 0.9))) 1;
1236.notebook tab.right:active {1209 border-image-width: 0 1px;
1237 padding: 4px 6px 4px 1px;
1238}1210}
12391211
1240.notebook tab.right {1212.notebook tab.right {
1241 padding: 3px 4px 3px 0;
1242 border-image: -gtk-gradient (linear, right top, left top,1213 border-image: -gtk-gradient (linear, right top, left top,
1243 from (alpha (shade (@bg_color, 0.9), 0.0)),1214 from (alpha (shade (@bg_color, 0.9), 0.0)),
1244 to (shade (@bg_color, 0.9))) 1;1215 to (shade (@bg_color, 0.9))) 1;
1245 border-image-width: 1px 0;1216 border-image-width: 1px 0;
1246}1217}
12471218
1248.notebook tab.bottom:active {1219.notebook tab.left {
1249 padding: 1px 7px 4px 7px;1220 border-image: -gtk-gradient (linear, left top, right top,
1221 from (alpha (shade (@bg_color, 0.9), 0.0)),
1222 to (shade (@bg_color, 0.9))) 1;
1223 border-image-width: 1px 0;
1250}1224}
12511225
1252.notebook tab.bottom {1226.notebook tab.bottom {
1253 padding: 0 5px 3px 5px;
1254 border-image: -gtk-gradient (linear, left bottom, left top,1227 border-image: -gtk-gradient (linear, left bottom, left top,
1255 from (alpha (shade (@bg_color, 0.9), 0.0)),1228 from (alpha (shade (@bg_color, 0.9), 0.0)),
1256 to (shade (@bg_color, 0.9))) 1;1229 to (shade (@bg_color, 0.9))) 1;
1257 border-image-width: 0 1px;1230 border-image-width: 0 1px;
1258}1231}
12591232
1260.notebook tab.left:active {
1261 padding: 4px 1px 4px 6px;
1262}
1263
1264.notebook tab.left {
1265 padding: 3px 0 3px 4px;
1266 border-image: -gtk-gradient (linear, left top, right top,
1267 from (alpha (shade (@bg_color, 0.9), 0.0)),
1268 to (shade (@bg_color, 0.9))) 1;
1269 border-image-width: 1px 0;
1270}
1271
1272.notebook tab .button {
1273 padding: 0;
1274}
1275
1276.notebook GtkDrawingArea {1233.notebook GtkDrawingArea {
1277 background-color: shade (@bg_color, 1.02);1234 background-color: shade (@bg_color, 1.02);
1278}1235}
@@ -1903,6 +1860,59 @@
1903 background-color: @base_color;1860 background-color: @base_color;
1904}1861}
19051862
1863/*
1864 * Header Bars
1865 *
1866 * The following rules only style header bars when they are used as a window's
1867 * titlebar widget (i.e., they have .titlebar set as well).
1868 *
1869 * Some applications reuse their header bar as a primary toolbar on desktops
1870 * that prefer showing traditional title bars. The rules for those are further
1871 * down grouped with normal toolbars.
1872 */
1873.titlebar.header-bar {
1874 padding: 2px;
1875 background-image: -gtk-gradient (linear, left top, left bottom,
1876 from (shade (@dark_bg_color, 1.5)),
1877 to (@dark_bg_color));
1878 border-color: shade (@dark_bg_color, 1.5);
1879 border-style: solid;
1880 border-width: 1px 0 0 0;
1881 border-radius: 7px 7px 0 0;
1882
1883 color: @dark_fg_color;
1884 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
1885
1886 box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
1887}
1888
1889.titlebar.header-bar .title {
1890 font: bold;
1891}
1892
1893.titlebar.header-bar:backdrop {
1894 color: @backdrop_fg_color;
1895 background-image: none;
1896 background-color: @dark_bg_color;
1897 border-top-color: @dark_bg_color;
1898 box-shadow: inset 0 1px shade (@dark_bg_color, 1.2);
1899}
1900
1901.maximized .titlebar.header-bar {
1902 border-radius: 0;
1903 border: none;
1904}
1905
1906.titlebar.header-bar .button.titlebutton {
1907 background-color: transparent;
1908 border-image-width: 0;
1909 box-shadow: none;
1910}
1911
1912.titlebar.header-bar .button.titlebutton:hover {
1913 border-image-width: 12px;
1914}
1915
1906/***********1916/***********
1907 * toolbar *1917 * toolbar *
1908 ***********/1918 ***********/
@@ -1938,6 +1948,7 @@
1938 border-top-color: shade (@dark_bg_color, 1.09);1948 border-top-color: shade (@dark_bg_color, 1.09);
1939 border-style: solid;1949 border-style: solid;
1940 border-width: 1px 0 1px 0;1950 border-width: 1px 0 1px 0;
1951 border-radius: 0;
19411952
1942 color: @dark_fg_color;1953 color: @dark_fg_color;
1943 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);1954 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
19441955
=== modified file 'Radiance/gtk-3.0/apps/gedit.css'
--- Radiance/gtk-3.0/apps/gedit.css 2014-01-15 13:42:18 +0000
+++ Radiance/gtk-3.0/apps/gedit.css 2014-07-10 15:07:43 +0000
@@ -14,7 +14,6 @@
14}14}
1515
16GeditWindow .notebook {16GeditWindow .notebook {
17 padding: 1px;
18 border-radius: 1px;17 border-radius: 1px;
19}18}
2019
2120
=== modified file 'Radiance/gtk-3.0/apps/nautilus.css'
--- Radiance/gtk-3.0/apps/nautilus.css 2013-05-22 17:18:39 +0000
+++ Radiance/gtk-3.0/apps/nautilus.css 2014-07-10 15:07:43 +0000
@@ -105,6 +105,10 @@
105 -GtkButton-inner-border: 0;105 -GtkButton-inner-border: 0;
106}106}
107107
108NautilusWindow .header-bar .button {
109 padding: 9px;
110}
111
108/* sidebar */112/* sidebar */
109NautilusWindow .sidebar,113NautilusWindow .sidebar,
110NautilusWindow .sidebar .view {114NautilusWindow .sidebar .view {
111115
=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
--- Radiance/gtk-3.0/gtk-widgets.css 2014-06-18 12:00:26 +0000
+++ Radiance/gtk-3.0/gtk-widgets.css 2014-07-10 15:07:43 +0000
@@ -116,14 +116,6 @@
116 box-shadow: inset -1px 0 shade (@bg_color, 0.94);116 box-shadow: inset -1px 0 shade (@bg_color, 0.94);
117}117}
118118
119/**************
120 * background *
121 **************/
122.background {
123 background-color: @bg_color;
124 border-width: 0;
125}
126
127/**********119/**********
128 * button *120 * button *
129 **********/121 **********/
@@ -1181,101 +1173,66 @@
1181/************1173/************
1182 * notebook *1174 * notebook *
1183 ************/1175 ************/
1184.notebook {1176.notebook tab.top { padding: 4px 6px 2px 6px; }
1185 background-color: shade (@bg_color, 1.02);1177.notebook tab.top:active { padding-bottom: 3px; }
1186 background-image: none;1178.notebook tab.bottom { padding: 2px 6px 4px 6px; }
1187 border-radius: 3px;1179.notebook tab.bottom:active { padding-top: 3px; }
1188 padding: 2px;1180.notebook tab.left { padding: 2px 4px 2px 6px; }
1189 background-clip: border-box;1181.notebook tab.left:active { padding-right: 5px; }
1190 border-color: shade (@bg_color, 0.82);1182.notebook tab.right { padding: 2px 6px 2px 4px; }
1191 border-width: 1px;1183.notebook tab.right:active { padding-left: 5px; }
1192 border-style: solid;1184
1193 /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/1185/* give active tab a background, as it might be dragged across of others when reordering */
1194 /*font-weight: 300;*/
1195}
1196
1197.notebook tab {
1198 background-image: none;
1199 background-color: transparent;
1200 border-style: solid;
1201 border-image: -gtk-gradient (linear, left top, left bottom,
1202 from (alpha (shade (@bg_color, 0.9), 0.0)),
1203 to (shade (@bg_color, 0.9))) 1;
1204 border-image-width: 0 1px;
1205 border-color: transparent;
1206 border-width: 0;
1207 box-shadow: none;
1208 /*color: shade (@fg_color, 1.2);*/
1209}
1210
1211.notebook tab:active {1186.notebook tab:active {
1187 background-color: @bg_color;
1188}
1189
1190.notebook.header {
1191 border-width: 0; /* set below depending on position of tab bar */
1212 border-color: shade (@bg_color, 0.82);1192 border-color: shade (@bg_color, 0.82);
1213 border-style: solid;1193 border-style: solid;
1214 border-width: 1px;1194}
1215 background-color: shade (@bg_color, 1.02);1195
1216 background-image: none;1196/* Draw a border between tabs and content ... */
1217 /*box-shadow: inset 0 1px shade (@bg_color, 1.1);*/1197.notebook.header.top { border-bottom-width: 1px; }
12181198.notebook.header.right { border-left-width: 1px; }
1219 color: @fg_color;1199.notebook.header.left { border-right-width: 1px; }
1220}1200.notebook.header.bottom { border-top-width: 1px; }
12211201
1222.notebook tab GtkLabel {1202/* ... unless the content is in a frame (thus having a border itself */
1223 /*padding: 1px;*/1203.notebook.header.frame.top { border: none; }
1224 padding: 1px 1px 2px 1px;1204.notebook.header.frame.right { border: none; }
1225}1205.notebook.header.frame.right { border: none; }
12261206.notebook.header.frame.bottom { border: none; }
1227.notebook tab {
1228 color: shade (@bg_color, 0.48);
1229}
1230
1231.notebook tab.top:active {
1232 padding: 3px 7px 1px 7px;
1233}
12341207
1235.notebook tab.top {1208.notebook tab.top {
1236 padding: 2px 5px 0 5px;1209 border-image: -gtk-gradient (linear, left top, left bottom,
1237}1210 from (alpha (shade (@bg_color, 0.9), 0.0)),
12381211 to (shade (@bg_color, 0.9))) 1;
1239.notebook tab.right:active {1212 border-image-width: 0 1px;
1240 padding: 4px 6px 4px 1px;
1241}1213}
12421214
1243.notebook tab.right {1215.notebook tab.right {
1244 padding: 3px 4px 3px 0;
1245 border-image: -gtk-gradient (linear, right top, left top,1216 border-image: -gtk-gradient (linear, right top, left top,
1246 from (alpha (shade (@bg_color, 0.9), 0.0)),1217 from (alpha (shade (@bg_color, 0.9), 0.0)),
1247 to (shade (@bg_color, 0.9))) 1;1218 to (shade (@bg_color, 0.9))) 1;
1248 border-image-width: 1px 0;1219 border-image-width: 1px 0;
1249}1220}
12501221
1251.notebook tab.bottom:active {1222.notebook tab.left {
1252 padding: 1px 7px 4px 7px;1223 border-image: -gtk-gradient (linear, left top, right top,
1224 from (alpha (shade (@bg_color, 0.9), 0.0)),
1225 to (shade (@bg_color, 0.9))) 1;
1226 border-image-width: 1px 0;
1253}1227}
12541228
1255.notebook tab.bottom {1229.notebook tab.bottom {
1256 padding: 0 5px 3px 5px;
1257 border-image: -gtk-gradient (linear, left bottom, left top,1230 border-image: -gtk-gradient (linear, left bottom, left top,
1258 from (alpha (shade (@bg_color, 0.9), 0.0)),1231 from (alpha (shade (@bg_color, 0.9), 0.0)),
1259 to (shade (@bg_color, 0.9))) 1;1232 to (shade (@bg_color, 0.9))) 1;
1260 border-image-width: 0 1px;1233 border-image-width: 0 1px;
1261}1234}
12621235
1263.notebook tab.left:active {
1264 padding: 4px 1px 4px 6px;
1265}
1266
1267.notebook tab.left {
1268 padding: 3px 0 3px 4px;
1269 border-image: -gtk-gradient (linear, left top, right top,
1270 from (alpha (shade (@bg_color, 0.9), 0.0)),
1271 to (shade (@bg_color, 0.9))) 1;
1272 border-image-width: 1px 0;
1273}
1274
1275.notebook tab .button {
1276 padding: 0;
1277}
1278
1279.notebook GtkDrawingArea {1236.notebook GtkDrawingArea {
1280 background-color: shade (@bg_color, 1.02);1237 background-color: shade (@bg_color, 1.02);
1281}1238}
@@ -1913,6 +1870,58 @@
1913 background-color: @base_color;1870 background-color: @base_color;
1914}1871}
19151872
1873/*
1874 * Header Bars
1875 *
1876 * The following rules only style header bars when they are used as a window's
1877 * titlebar widget (i.e., they have .titlebar set as well).
1878 *
1879 * Some applications reuse their header bar as a primary toolbar on desktops
1880 * that prefer showing traditional title bars. The rules for those are further
1881 * down grouped with normal toolbars.
1882 */
1883.titlebar.header-bar {
1884 padding: 2px;
1885 background-image: -gtk-gradient (linear, left top, left bottom,
1886 from (shade (@dark_bg_color, 1.5)),
1887 to (@dark_bg_color));
1888 border-color: shade (@dark_bg_color, 1.5);
1889 border-style: solid;
1890 border-width: 1px 0 0 0;
1891 border-radius: 7px 7px 0 0;
1892
1893 color: @dark_fg_color;
1894
1895 box-shadow: inset 0 1px shade (@dark_bg_color, 1.65);
1896}
1897
1898.titlebar.header-bar .title {
1899 font: bold;
1900}
1901
1902.titlebar.header-bar:backdrop {
1903 color: @backdrop_fg_color;
1904 background-image: none;
1905 background-color: @dark_bg_color;
1906 border-top-color: @dark_bg_color;
1907}
1908
1909.maximized .titlebar.header-bar {
1910 border-radius: 0;
1911 border: none;
1912}
1913
1914.titlebar.header-bar .button.titlebutton {
1915 background-color: transparent;
1916 border-image-width: 0;
1917 box-shadow: none;
1918}
1919
1920.titlebar.header-bar .button.titlebutton:hover {
1921 border-image-width: 12px;
1922}
1923
1924
1916/***********1925/***********
1917 * toolbar *1926 * toolbar *
1918 ***********/1927 ***********/
@@ -1948,6 +1957,7 @@
1948 border-top-color: shade (@dark_bg_color, 1.09);1957 border-top-color: shade (@dark_bg_color, 1.09);
1949 border-style: solid;1958 border-style: solid;
1950 border-width: 1px 0 1px 0;1959 border-width: 1px 0 1px 0;
1960 border-radius: 0;
19511961
1952 color: @dark_fg_color;1962 color: @dark_fg_color;
1953 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);1963 text-shadow: 0 -1px shade (@dark_bg_color, 0.7);

Subscribers

People subscribed via source and target branches