elementary Stylesheet

Merge lp:~nicolas-laplante/egtk/egtk into lp:~elementary-design/egtk/trunk

  1. egtk
  2. Merge into trunk
Proposed by Nicolas Laplante
Status: Merged
Approved by: Cody Garver
Approved revision: 382
Merged at revision: 383
Proposed branch: lp:~nicolas-laplante/egtk/egtk
Merge into: lp:~elementary-design/egtk/trunk
Diff against target: 350 lines (+44/-41)
2 files modified
gtk-3.0/gtk-dark.css (+2/-1)
gtk-3.0/gtk-widgets.css (+42/-40)
To merge this branch: bzr merge lp:~nicolas-laplante/egtk/egtk
Reviewer Review Type Date Requested Status
elementary UX Pending
Review via email: mp+244943@code.launchpad.net

Commit message

Set proper border color for tree view grid lines

Description of the change

Set proper border color for tree view grid lines. According to Gtk's source code, it uses the border-top-color of the GtkTreeView to draw the grid lines. By default, grid lines are pitch black, which doesn't flow well with Elementary's GTK theme.

Additionaly, the @border_color property is not defined for the dark theme. My proposal adds the property to it.

To post a comment you must log in.
Revision history for this message
Nicolas Laplante (nicolas-laplante) wrote :

I have no idea why blank lines are in this diff.

Revision history for this message
Shawn McTear (syst3mfailur3) wrote :

I think the blank lines removed had indentation, yours don't. Thats a good thing.
Didn't test your proposal, just commenting.

Revision history for this message
RabbitBot (rabbitbot-a) wrote :

Attempt to merge into lp:egtk failed due to conflicts:

text conflict in gtk-3.0/gtk-widgets.css

lp:~nicolas-laplante/egtk/egtk updated
382. By Nicolas Laplante

Merge with upstream

Revision history for this message
Nicolas Laplante (nicolas-laplante) wrote :

This is my first bzr merge attempt. I hope I did it right.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'gtk-3.0/gtk-dark.css'
2--- gtk-3.0/gtk-dark.css 2014-07-03 06:16:24 +0000
3+++ gtk-3.0/gtk-dark.css 2014-12-28 22:52:38 +0000
4@@ -19,6 +19,7 @@
5 /* Default color scheme */
6 @define-color base_color #383e41;
7 @define-color bg_color shade (@base_color, 0.96);
8+@define-color border_color alpha (#000, 0.22);
9 @define-color fg_color #969f9d;
10 @define-color headerbar_color #838484;
11 @define-color insensitive_color shade (@bg_color, 0.4);
12@@ -74,4 +75,4 @@
13 @define-color insensitive_fg_color #a7aba7;
14
15 @import url("gtk-widgets.css");
16-@import url("gtk-widgets-dark.css");
17\ No newline at end of file
18+@import url("gtk-widgets-dark.css");
19
20=== modified file 'gtk-3.0/gtk-widgets.css'
21--- gtk-3.0/gtk-widgets.css 2014-12-17 18:36:13 +0000
22+++ gtk-3.0/gtk-widgets.css 2014-12-28 22:52:38 +0000
23@@ -18,7 +18,7 @@
24
25 * {
26 background-clip: padding-box;
27-
28+
29 -GtkTextView-error-underline-color: @error_color;
30
31 -GtkScrolledWindow-scrollbar-spacing: 0;
32@@ -32,7 +32,7 @@
33
34 -GtkWidget-focus-line-width: 0;
35 -GtkWidget-focus-padding: 0;
36-
37+
38 -GtkWindow-decoration-button-layout: 'close:maximize'
39 -GtkWindow-resize-grip-width: 0;
40 -GtkWindow-resize-grip-height: 0;
41@@ -86,7 +86,7 @@
42 /************
43 * Tooltips *
44 ************/
45-
46+
47 /* FIXME: find out class name for granite overlay
48 or have it changed to .tooltip in granite */
49 .tooltip,
50@@ -156,7 +156,7 @@
51 /**************
52 * Separators *
53 *************/
54-
55+
56 .separator {
57 color: @menu_separator;
58 }
59@@ -212,7 +212,7 @@
60 box-shadow: inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
61 inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
62 0 1px 0 0 alpha (#fff, 0.30);
63-
64+
65 color: @text_color;
66
67 icon-shadow: 0 1px alpha (#fff, 0.4);
68@@ -474,12 +474,12 @@
69 .scale.slider {
70 border: 1px solid alpha (#000, 0.25);
71 border-radius: 10px;
72-
73+
74 background-image: linear-gradient(to bottom,
75 shade (@bg_color, 1.10),
76 shade (@bg_color, 0.88)
77 );
78-
79+
80 box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
81 inset 0 1px 0 0 alpha (#fff, 0.90),
82 inset 0 -1px 0 0 alpha (#fff, 0.30),
83@@ -500,9 +500,9 @@
84 shade (@bg_color, 1.05),
85 shade (@bg_color, 0.95)
86 );
87-
88+
89 border-color: alpha (#000, 0.15);
90-
91+
92 box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
93 inset 0 1px 0 0 alpha (#fff, 0.90),
94 inset 0 -1px 0 0 alpha (#fff, 0.30),
95@@ -579,7 +579,7 @@
96
97 .scale.highlight.left:insensitive {
98 border: 1px solid alpha (#000, 0.40);
99-
100+
101 background-image: linear-gradient(to bottom,
102 alpha (#000, 0.30),
103 alpha (#000, 0.20)
104@@ -655,7 +655,7 @@
105 transparent 50%,
106 alpha (#000, 0.04)
107 );
108-
109+
110 border: 1px solid alpha (#000, 0.2);
111 border-radius: 2.5px;
112
113@@ -671,7 +671,7 @@
114
115 .button:backdrop {
116 background-image: none;
117-
118+
119 border: 1px solid alpha (#000, 0.2);
120 }
121
122@@ -781,7 +781,7 @@
123 color: @link_color;
124 }
125
126-/***************************
127+/***************************
128 * Overlay Button *
129 ***************************/
130
131@@ -818,7 +818,7 @@
132 }
133
134
135-/***************************
136+/***************************
137 * Secondary Toolbar Button *
138 ***************************/
139
140@@ -850,11 +850,11 @@
141 .secondary-toolbar.toolbar .button:hover:active {
142 background-image: none;
143 background-color: alpha (#000, 0.10);
144-
145+
146 box-shadow: inset 0 0 0 1px alpha (#000, 0.05),
147 inset 0 1px 0 0 alpha (#000, 0.25),
148 inset 0 -1px 0 0 alpha (#fff, 0.4);
149-
150+
151 padding: 0 3px 0 3px;
152 }
153
154@@ -1134,6 +1134,7 @@
155
156 text-shadow: 0 1px alpha (#fff, 0.4);
157 icon-shadow: 0 1px alpha (#fff, 0.4);
158+
159 border: 1px solid shade (@titlebar_color, 0.60);
160 }
161
162@@ -1248,7 +1249,7 @@
163 shade (@base_color, 0.93),
164 shade (@base_color, 0.97)
165 );
166-
167+
168 box-shadow: inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
169 inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
170 0 1px 0 0 alpha (#fff, 0.30);
171@@ -1264,7 +1265,7 @@
172 shade (@base_color, 0.90),
173 @base_color
174 );
175-
176+
177 box-shadow: inset 0 0 0 1px @inset_dark_color,
178 0 1px 0 0 alpha (#fff, 0.30);
179 }
180@@ -1461,7 +1462,7 @@
181 }
182
183 .check:focus {
184- background-image: url("assets/check-focus.svg");
185+ background-image: url("assets/check-focus.svg");
186 }
187
188 .radio {
189@@ -1477,12 +1478,12 @@
190
191 .check:active,
192 .menuitem.check:active {
193- background-image: url("assets/check-active.svg");
194+ background-image: url("assets/check-active.svg");
195 }
196
197 .radio:active,
198 .menuitem.radio:active {
199- background-image: url("assets/radio-active.svg");
200+ background-image: url("assets/radio-active.svg");
201 }
202
203 /***********
204@@ -1491,7 +1492,7 @@
205
206 .toolbar {
207 -GtkWidget-window-dragging: true;
208-
209+
210 padding: 0 3px 3px;
211
212 border: 1px solid shade (@titlebar_color, 0.56);
213@@ -1516,7 +1517,7 @@
214 border-color: shade (@titlebar_color, 0.64);
215
216 box-shadow: inset 0 -1px 0 0 alpha (#fff, 0.40);
217-
218+
219 -gtk-image-effect: dim;
220 }
221
222@@ -1524,7 +1525,7 @@
223 -GtkWidget-wide-separators: true;
224 -GtkWidget-horizontal-separator: 0;
225 -GtkWidget-vertical-separator: 0;
226-}
227+}
228
229 /*********************
230 * Secondary Toolbars *
231@@ -1553,9 +1554,9 @@
232 shade (@titlebar_color, 0.94)
233 );
234 border-color: shade (@titlebar_color, 0.70);
235-
236+
237 color: @insensitive_color;
238-
239+
240 -gtk-image-effect: dim;
241 }
242
243@@ -1604,7 +1605,7 @@
244 .header-bar .button.image-button:active,
245 .header-bar .button.image-button:hover:active,
246 .header-bar .button.image-button:focus:active {
247- background-color: alpha (#000, 0.10);
248+ background-color: alpha (#000, 0.10);
249 border: 1px solid @border_color;
250 box-shadow: inset 0 0 0 1px alpha (#000, 0.05),
251 0 1px 0 0 alpha (#fff, 0.30);
252@@ -1655,7 +1656,7 @@
253 GtkDialog .action-bar {
254 background-image: none;
255 background-color: @bg_color;
256- border-top-color: shade (@bg_color, 0.80);
257+ border-top-color: shade (@bg_color, 0.80);
258 }
259
260 .action-bar .button {
261@@ -1777,9 +1778,9 @@
262 shade (@titlebar_color, 0.94)
263 );
264 border-color: shade (@titlebar_color, 0.70);
265-
266+
267 color: @insensitive_color;
268-
269+
270 -gtk-image-effect: dim;
271 }
272
273@@ -1899,7 +1900,7 @@
274 background-image: url("assets/switch-off.svg");
275 background-repeat: no-repeat;
276 background-position: 0 center;
277-
278+
279 color: transparent;
280 border: none;
281 box-shadow: none;
282@@ -1942,6 +1943,7 @@
283 -GtkTreeView-horizontal-separator: 6px;
284 -GtkTreeView-expander-size: 8px;
285 -GtkTreeView-grid-line-pattern: "\000\000";
286+ border-top-color: @border_color;
287 }
288
289 GtkTreeView row:nth-child(even) {
290@@ -2149,7 +2151,7 @@
291 .content-view .option-description {
292 color: alpha (@text_color, 0.5);
293 text-shadow: 0 1px alpha (#fff, 0.4);
294-}
295+}
296
297 .content-view .toolbar {
298 padding: 1px;
299@@ -2158,7 +2160,7 @@
300 alpha (#000, 0.10),
301 alpha (#000, 0.03)
302 );
303-
304+
305 border-color: alpha (#000, 0.05);
306 }
307
308@@ -2361,7 +2363,7 @@
309 /*************
310 * GtkInfoBar *
311 *************/
312-
313+
314 .info,
315 .question,
316 .warning,
317@@ -2446,12 +2448,12 @@
318
319 text-shadow: none;
320 icon-shadow: none;
321-
322- background-image: none;
323- background-color: transparent;
324+
325+ background-image: none;
326+ background-color: transparent;
327
328 border: 1px solid alpha (#000, 0.3);
329-
330+
331 box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
332 inset 0 1px 0 0 alpha (#fff, 0.45),
333 inset 0 -1px 0 0 alpha (#fff, 0.15),
334@@ -2468,7 +2470,7 @@
335 GtkInfoBar .button:insensitive,
336 GtkInfoBar .button:hover:insensitive {
337 background-image: none;
338- background-color: transparent;
339+ background-color: transparent;
340
341 border-color: alpha (#000, 0.18);
342 }
343@@ -2596,7 +2598,7 @@
344 border-color: shade (@titlebar_color, 0.64);
345
346 box-shadow: inset 0 0 0 1px alpha (#fff, 0.40);
347-
348+
349 -gtk-image-effect: dim;
350 }
351

Subscribers

People subscribed via source and target branches

to status/vote changes: