Mercurial > repos > other > Adwaita-Dark-Green
comparison gtk-3.20/gtk.scss @ 24:1b8713fff1e1
Add initial GTK3.20 support ready for upgrade to openSUSE Leap 42.2
author | IBBoard <dev@ibboard.co.uk> |
---|---|
date | Tue, 22 Nov 2016 20:58:58 +0000 |
parents | |
children | cf107670260d |
comparison
equal
deleted
inserted
replaced
23:279a2801a81b | 24:1b8713fff1e1 |
---|---|
1 // General guidelines: | |
2 // - very unlikely you want to edit something else than _common.scss | |
3 // - keep the number of defined colors to a minimum, use the color blending functions if | |
4 // you need a subtle shade | |
5 // - if you need to inverse a color function use the @if directive to match for dark $variant | |
6 | |
7 | |
8 /// TODO: | |
9 /// * Terminal background is $base_color | |
10 /// * Nautilus icon view background with multiple tabs is $base_color | |
11 /// * Right-click and drop-down menu border (esp in Geany and gEdit) | |
12 | |
13 | |
14 $variant: 'light'; | |
15 | |
16 // Import the default colours | |
17 @import 'colors'; | |
18 | |
19 // Override some colours | |
20 $base_color: #C6C6C6; | |
21 $bg_color: #C6C6C6; | |
22 $fg_color: #161616; | |
23 $selected_bg_color: #5E7F3E; | |
24 $selected_borders_color: darken($selected_bg_color, 30%); | |
25 $borders_color: darken($bg_color,30%); | |
26 $borders_edge: transparentize(lighten($bg_color, 30%), 0.9); | |
27 $dark_fill: mix($borders_color, $bg_color, 35%); | |
28 $link_color: darken($selected_bg_color,10%); | |
29 $link_visited_color: darken($selected_bg_color,20%); | |
30 $top_hilight: $borders_edge; | |
31 $popover_bg_color: $bg_color; | |
32 $popover_hover_color: lighten($bg_color, 5%); | |
33 $menu_color: $bg_color; | |
34 | |
35 $scrollbar_bg_color: darken($bg_color, 7%); | |
36 | |
37 $sidebar_bg_color: darken($bg_color,5%); | |
38 | |
39 //insensitive state derived colors | |
40 $insensitive_fg_color: mix($fg_color, $bg_color, 50%); | |
41 $insensitive_bg_color: mix($bg_color, $base_color, 60%); | |
42 $insensitive_borders_color: $borders_color; | |
43 | |
44 //colors for the backdrop state, derived from the main colors. | |
45 $backdrop_base_color: darken($base_color, 1%); | |
46 $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%); | |
47 $backdrop_bg_color: $bg_color; | |
48 $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%); | |
49 $backdrop_insensitive_color: darken($backdrop_bg_color, 15%); | |
50 $backdrop_selected_fg_color: $selected_fg_color; | |
51 $backdrop_selected_bg_color: desaturate($selected_bg_color,100%); | |
52 $backdrop_borders_color: mix($borders_color, $bg_color, 90%); | |
53 $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%); | |
54 $backdrop_sidebar_bg_color: darken($backdrop_bg_color,5%); | |
55 $backdrop_menu_color: $backdrop_bg_color; | |
56 | |
57 $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%); | |
58 | |
59 | |
60 // Add our own colours | |
61 $text_input_color: #F0F0F0; | |
62 $backdrop_text_input_color: darken($text_input_color, 1%); | |
63 $bg_dark_color: #3D3D3D; | |
64 $fg_dark_color: #dddddd; | |
65 $insensitive_dark_fg_color: mix($fg_dark_color, $bg_dark_color, 50%); | |
66 $titlebar_highlight: #4c4c4c; | |
67 $header_button_raised_gradient_color_a: lighten($bg_dark_color, 10%); | |
68 $header_button_checked: darken($bg_dark_color, 5%); | |
69 $header_button_border: darken($bg_dark_color, 5%); | |
70 $header_button_border_unfocused: darken($bg_dark_color, 5%); | |
71 $menu_fg_dark_color: #cccccc; | |
72 $focused_entry_outer: transparentize($selected_bg_color, 0.45); | |
73 $bg_gradient_1: lighten($bg_color, 20%); | |
74 $bg_gradient_2: lighten($bg_color, 10%); | |
75 $bg_gradient_3: lighten($bg_color, 5%); | |
76 $bg_prelight: $bg_gradient_1; | |
77 $selected_bg_color_hover: lighten($selected_bg_color, 10%); | |
78 $selected_bg_color_shade: darken($selected_bg_color, 10%); | |
79 $selected_bg_border: darken($selected_bg_color, 30%); | |
80 $title_fg: #fff; | |
81 $header_separator: lighten($bg_dark_color, 10%); | |
82 $fg_color_emphasis: darken($fg_color, 50%); | |
83 $fg_color_de_emphasis: lighten($fg_color, 20%); | |
84 $unfocused_fg_color: $backdrop_fg_color; | |
85 $unfocused_insensitive_fg_color: lighten($insensitive_fg_color, 20%); | |
86 $transparent_outline: #383436; | |
87 | |
88 // Import the default widgets | |
89 @import 'drawing'; | |
90 // Style everything | |
91 @import 'common'; | |
92 //Export default colours | |
93 @import 'colors-public'; | |
94 | |
95 //Override some exported colours | |
96 @define-color wm_title #{"" + $bg_dark_color}; | |
97 @define-color wm_unfocused_title #{"" + $bg_dark_color}; | |
98 @define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03); | |
99 @define-color wm_borders_edge #{"" + $bg_dark_color}; | |
100 | |
101 @define-color wm_bg_a shade(#{$bg_dark_color}, 1.2); | |
102 @define-color wm_bg_b #{$bg_dark_color}; | |
103 | |
104 @define-color wm_button_hover_color_a shade(#{$bg_dark_color}, 1.3); | |
105 @define-color wm_button_hover_color_b #{$bg_dark_color}; | |
106 @define-color wm_button_active_color_a shade(#{$bg_dark_color}, 0.85); | |
107 @define-color wm_button_active_color_b shade(#{$bg_dark_color}, 0.89); | |
108 @define-color wm_button_active_color_c shade(#{$bg_dark_color}, 0.9); | |
109 | |
110 | |
111 // And now do our own overrides of styling | |
112 *:insensitive { | |
113 -gtk-image-effect: highlight; | |
114 } | |
115 | |
116 /*************** | |
117 * Header bars * | |
118 ***************/ | |
119 %titlebar, | |
120 headerbar { | |
121 color: $title_fg; | |
122 background-image: linear-gradient(to bottom, $bg_dark_color, lighten($bg_dark_color, 3%) 20%, $bg_dark_color 45%); | |
123 border-color: shade($bg_dark_color, 0.90); | |
124 border-bottom-width: 0; | |
125 box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border; | |
126 background-color: $bg_dark_color; | |
127 | |
128 &:backdrop { | |
129 color: $fg_dark_color; | |
130 box-shadow: none; | |
131 background-color: $bg_dark_color; | |
132 background-image: none; | |
133 border-bottom-width: 0; | |
134 border-color: darken($bg_dark_color, 10%); | |
135 } | |
136 | |
137 .title { | |
138 color: $title_fg; | |
139 } | |
140 | |
141 .subtitle { | |
142 } | |
143 | |
144 .tiled &, | |
145 .maximized & { &:backdrop, & { }} | |
146 | |
147 &.default-decoration { | |
148 button.titlebutton { | |
149 } | |
150 } | |
151 } | |
152 | |
153 headerbar { | |
154 entry, | |
155 spinbutton, | |
156 separator, | |
157 button { | |
158 } | |
159 switch { | |
160 } | |
161 } | |
162 | |
163 .background:not(.tiled):not(.maximized) .titlebar { | |
164 &:backdrop, & { | |
165 } | |
166 } | |
167 | |
168 headerbar { | |
169 window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case | |
170 window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { }} | |
171 | |
172 window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { }} | |
173 } | |
174 | |
175 .titlebar:not(headerbar) { | |
176 window.csd > & { | |
177 // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases | |
178 padding: 0; | |
179 background-color: transparent; | |
180 background-image: none; | |
181 border-style: none; | |
182 border-color: transparent; | |
183 box-shadow: none; | |
184 } | |
185 | |
186 > separator { background-color: $borders_color; } | |
187 | |
188 @extend %titlebar; | |
189 } | |
190 | |
191 headerbar button { | |
192 &, &:backdrop { | |
193 &, &:checked { | |
194 &, & label { | |
195 color: $fg_dark_color; | |
196 } | |
197 } | |
198 } | |
199 } | |
200 %titlebar, | |
201 headerbar { | |
202 button { | |
203 color: $fg_dark_color; | |
204 background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color); | |
205 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
206 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
207 border-color: $header_button_border; | |
208 outline-color: $header_button_raised_gradient_color_a; | |
209 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; | |
210 | |
211 &.flat, &.titlebutton { | |
212 color: $fg_dark_color; | |
213 background-image: none; | |
214 background-color: transparent; | |
215 border-color: transparent; | |
216 box-shadow: none; | |
217 text-shadow: none; | |
218 icon-shadow: none; | |
219 | |
220 &:hover, &:active, &:backdrop { | |
221 color: $title_fg; | |
222 } | |
223 } | |
224 | |
225 &:hover, &.titlebutton:hover { | |
226 color: shade($fg_dark_color, 1.3); | |
227 outline-color: $header_button_raised_gradient_color_a; | |
228 border-color: $header_button_border; | |
229 background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1)); | |
230 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
231 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
232 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; | |
233 } | |
234 | |
235 &:active, | |
236 &:checked, &.titlebutton:active, &.titlebutton:active:backdrop { | |
237 color: $title_fg; | |
238 outline-color: $header_button_raised_gradient_color_a; | |
239 border-color: $header_button_border; | |
240 background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked); | |
241 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
242 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5); | |
243 box-shadow: inset 0 1px transparentize($header_button_raised_gradient_color_a, 0.7), 0 1px $header_button_raised_gradient_color_a; | |
244 } | |
245 | |
246 &:backdrop { | |
247 &.flat, & { | |
248 color: $fg_dark_color; | |
249 background-image: none; | |
250 background-color: $bg_dark_color; | |
251 border-color: $header_button_border; | |
252 box-shadow:none; | |
253 text-shadow: none; | |
254 icon-shadow: none; | |
255 | |
256 transition: $backdrop_transition; | |
257 -gtk-icon-effect: none; | |
258 | |
259 &:active, | |
260 &:checked { | |
261 background-image: none; | |
262 background-color: $header_button_checked; | |
263 border-color: $header_button_border; | |
264 } | |
265 | |
266 &:disabled, &.suggested-action:disabled { | |
267 color: $insensitive_dark_fg_color; | |
268 background-color: $bg_dark_color; | |
269 background-image: none; | |
270 border-color: $header_button_border; | |
271 box-shadow: none; | |
272 | |
273 &:active, | |
274 &:checked { } | |
275 } | |
276 } | |
277 } | |
278 | |
279 &.flat { &:backdrop, &:disabled, &:backdrop:disabled { }} | |
280 | |
281 &:disabled, &.suggested-action:disabled { | |
282 color: $insensitive_dark_fg_color; | |
283 background-color: $bg_dark_color; | |
284 background-image: none; | |
285 border-color: $header_button_border; | |
286 box-shadow: 0 1px $header_button_raised_gradient_color_a; | |
287 | |
288 &:active, | |
289 &:checked { @include button(insensitive-active, $header_button_raised_gradient_color_a, $fg_dark_color); } | |
290 } | |
291 | |
292 &:drop(active) { | |
293 color: $drop_target_color; | |
294 border-color: $drop_target_color; | |
295 box-shadow: inset 0 0 0 1px $drop_target_color; | |
296 } | |
297 | |
298 &.suggested-action:backdrop { | |
299 border-color: $header_button_border; | |
300 } | |
301 | |
302 &.suggested-action label { color: $selected_fg_color; } | |
303 } | |
304 } | |
305 | |
306 column-header button, column-header headerbar button.titlebutton, headerbar column-header button.titlebutton, | |
307 column-header .titlebar button.titlebutton, | |
308 .titlebar column-header button.titlebutton { | |
309 color: $fg_color; | |
310 background-color: $bg_gradient_2;} | |
311 column-header button:hover, column-header headerbar button.titlebutton:hover, headerbar column-header button.titlebutton:hover, | |
312 column-header .titlebar button.titlebutton:hover, | |
313 .titlebar column-header button.titlebutton:hover { | |
314 color: $fg_color_emphasis; } | |
315 | |
316 entry, .linked.vertical > entry, .linked.vertical > entry:first-child, .linked.vertical > entry:last-child, spinbutton:not(.vertical) { | |
317 background-image: entry_gradient($text_input_color); | |
318 background-color: $text_input_color; | |
319 | |
320 &:focus { background-image: entry_gradient($text_input_color); } | |
321 &:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); } | |
322 &:backdrop { background-image: none; background-color: $backdrop_text_input_color; } | |
323 &:backdrop:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); } | |
324 } | |
325 spinbutton:not(.vertical) button:hover { | |
326 background-color: transparentize($bg_color,0.6); | |
327 border-top-color: transparent; | |
328 border-top-style: solid; | |
329 border-top-width:1px; | |
330 border-bottom-color: transparent; | |
331 border-bottom-style: solid; | |
332 border-bottom-width:1px; | |
333 background-clip: padding-box; | |
334 } | |
335 | |
336 .view, .view text, iconview, iconview text, textview, textview text, list, list-row, list-row.button, { | |
337 color: $text_color; | |
338 background-color: $text_input_color; | |
339 &:backdrop, &:backdrop:hover { | |
340 color: $backdrop_text_color; | |
341 background-color: $backdrop_text_input_color; | |
342 } | |
343 &:selected { | |
344 color: $selected_fg_color; | |
345 background-color: $selected_bg_color; | |
346 } | |
347 &:hover { | |
348 background-color: mix($fg_color, $text_input_color, 5%); | |
349 } | |
350 &:active { | |
351 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); | |
352 } | |
353 &:selected { | |
354 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } | |
355 &:hover { | |
356 background-color: mix($fg_color, $selected_bg_color, 10%); | |
357 } | |
358 &:backdrop { background-color: $selected_bg_color; } | |
359 } | |
360 } | |
361 | |
362 // The path bar box in Open dialogs is classed as a view, but we don't | |
363 // want it that light | |
364 #pathbarbox { | |
365 background-color: $bg_color; | |
366 } | |
367 list-row { | |
368 // Set sidebar items back to something reasonable | |
369 &.sidebar-item { | |
370 background-color: $sidebar_bg_color; | |
371 border-color: $borders_color; | |
372 &:backdrop, &:backdrop:hover { | |
373 background-color: $backdrop_sidebar_bg_color; | |
374 border-color: $backdrop_borders_color; | |
375 } | |
376 // let's take care of background colors | |
377 &:hover { | |
378 background-color: mix($fg_color, $base_color, 5%); | |
379 } | |
380 &:active { | |
381 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); | |
382 } | |
383 &:selected { | |
384 background-color: $selected_bg_color; | |
385 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); } | |
386 &:hover { | |
387 background-color: mix($fg_color, $selected_bg_color, 10%); | |
388 } | |
389 &:backdrop { background-color: $selected_bg_color; } | |
390 } | |
391 } | |
392 } | |
393 | |
394 /* Fudge the Nautilus icon view background colour in the only way that seems to work */ | |
395 .nautilus-window notebook { background-color: $text_input_color; } | |
396 | |
397 /* And make the Nautilus places bar a bit darker, as it used to be */ | |
398 placessidebar list { | |
399 background-color: $sidebar_bg_color; | |
400 border-color: $borders_color; | |
401 &:backdrop { | |
402 background-color: $backdrop_sidebar_bg_color; | |
403 border-color: $backdrop_borders_color; | |
404 } | |
405 } | |
406 | |
407 // Fix the rubberband background after we gave lists and views a lighter background | |
408 .view.rubberband { | |
409 background-color: transparentize($selected_bg_color,0.8); | |
410 } | |
411 menubar { | |
412 background-color: $bg_dark_color; | |
413 color: $menu_fg_dark_color; | |
414 box-shadow: inset 0 -1px transparentize(black, 0.9); | |
415 &:backdrop { | |
416 background-color: $bg_dark_color; | |
417 color: $menu_fg_dark_color; | |
418 } | |
419 } | |
420 menubar, headerbar { | |
421 menu { | |
422 background-color: $bg_dark_color; | |
423 color: $menu_fg_dark_color; | |
424 border-color: $header_button_border; | |
425 } | |
426 & > menuitem { | |
427 &:hover { //Seems like it :hover even with keyboard focus | |
428 box-shadow: inset 0 -3px $selected_bg_color; | |
429 } | |
430 &, & label { | |
431 &:hover { //Seems like it :hover even with keyboard focus | |
432 color: $selected_bg_color | |
433 } | |
434 &:insensitive { | |
435 color: $insensitive_fg_color; | |
436 box-shadow: none; | |
437 } | |
438 &:backdrop { | |
439 color: $menu_fg_dark_color; | |
440 } | |
441 & menuitem.check, & menuitem.radio { | |
442 color: $fg_dark_color; | |
443 } | |
444 } | |
445 } | |
446 } | |
447 menu, | |
448 .menu, | |
449 .context-menu { | |
450 //border-color: darken($borders_color,40%); | |
451 border: 5px solid #f00; | |
452 } | |
453 .floating-bar { | |
454 opacity: 0.9; | |
455 color: $text_color; | |
456 background-color: $text_input_color; | |
457 border: 1px solid $borders_color; | |
458 | |
459 @each $tb,$tb_corner in ('top','bottom'), | |
460 ('bottom','top') { | |
461 @each $lr,$lr_corner in ('left','right'), | |
462 ('right','left') { | |
463 &.#{$tb}.#{$lr} { | |
464 border-#{$tb_corner}-#{$lr_corner}-radius: 3px; | |
465 border-#{$tb}-width: 0; | |
466 border-#{$lr}-width: 0; | |
467 } | |
468 } | |
469 } | |
470 } | |
471 | |
472 treeview.view header button { | |
473 &, &:hover, &:active, &:disabled { | |
474 &, &:backdrop { | |
475 border-color: lighten($borders_color, 20%); | |
476 } | |
477 } | |
478 } | |
479 | |
480 treeview.view header button:last-child { | |
481 &:hover { | |
482 border-right-width: 0; | |
483 } | |
484 } | |
485 | |
486 // Lighten selected tabs a bit to match other UI | |
487 notebook { | |
488 > header { | |
489 tab { | |
490 &:checked { | |
491 &.reorderable-page { | |
492 border-color: $borders_color; | |
493 background-color: $bg_color; | |
494 &:hover { background-color: lighten($bg_color, 5%); } | |
495 } | |
496 } | |
497 | |
498 &:backdrop:checked { | |
499 &.reorderable-page { | |
500 background-color: $backdrop_bg_color; | |
501 } | |
502 } | |
503 } | |
504 } | |
505 } |