Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-3.20/gtk.scss @ 24:1b8713fff1e1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }