Mercurial > repos > other > Adwaita-Dark-Green

comparison gtk-3.0/gtk.scss @ 3:9a738f9171a1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add custom SCSS file with existing overrides and rebuild gtk.css
author IBBoard <dev@ibboard.co.uk>
date Sat, 09 Apr 2016 20:51:14 +0100
parents
children 52574f98627d
comparison
equal deleted inserted replaced
2:2dca25afcd95 3:9a738f9171a1
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 $variant: 'light';
8
9 // Import the default colours
10 @import 'colors';
11
12 // Override some colours
13 $base_color: #C6C6C6;
14 $bg_color: #C6C6C6;
15 $fg_color: #161616;
16 $selected_bg_color: #5E7F3E;
17 $selected_borders_color: darken($selected_bg_color, 30%);
18 $borders_color: darken($bg_color,30%);
19 $borders_edge: transparentize(lighten($bg_color, 30%), 0.9);
20 $link_color: darken($selected_bg_color,10%);
21 $link_visited_color: darken($selected_bg_color,20%);
22 $top_hilight: $borders_edge;
23
24 $scrollbar_bg_color: darken($bg_color, 7%);
25
26 $sidebar_bg_color: darken($bg_color,5%);
27
28 //insensitive state derived colors
29 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
30 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
31 $insensitive_borders_color: $borders_color;
32
33 //colors for the backdrop state, derived from the main colors.
34 $backdrop_base_color: darken($base_color, 1%);
35 $backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
36 $backdrop_bg_color: $bg_color;
37 $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
38 $backdrop_insensitive_color: darken($backdrop_bg_color, 15%);
39 $backdrop_selected_fg_color: $selected_fg_color;
40 $backdrop_selected_bg_color: desaturate($selected_bg_color,100%);
41 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
42 $backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
43 $backdrop_sidebar_bg_color: darken($backdrop_bg_color,5%);
44
45 $backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
46
47
48 // Add our own colours
49 $text_input_color: #F0F0F0;
50 $backdrop_text_input_color: darken($text_input_color, 1%);
51 $bg_dark_color: #3D3D3D;
52 $fg_dark_color: #dddddd;
53 $insensitive_dark_fg_color: mix($fg_dark_color, $bg_dark_color, 50%);
54 $titlebar_highlight: #4c4c4c;
55 $header_button_raised_gradient_color_a: lighten($bg_dark_color, 10%);
56 $header_button_checked: darken($bg_dark_color, 5%);
57 $header_button_border: darken($bg_dark_color, 5%);
58 $header_button_border_unfocused: darken($bg_dark_color, 5%);
59 $menu_fg_dark_color: #cccccc;
60 $focused_entry_outer: transparentize($selected_bg_color, 0.45);
61 $bg_gradient_1: lighten($bg_color, 20%);
62 $bg_gradient_2: lighten($bg_color, 10%);
63 $bg_gradient_3: lighten($bg_color, 5%);
64 $bg_prelight: $bg_gradient_1;
65 $selected_bg_color_hover: lighten($selected_bg_color, 10%);
66 $selected_bg_color_shade: darken($selected_bg_color, 10%);
67 $selected_bg_border: darken($selected_bg_color, 30%);
68 $title_fg: #fff;
69 $header_separator: lighten($bg_dark_color, 10%);
70 $fg_color_emphasis: darken($fg_color, 50%);
71 $fg_color_de_emphasis: lighten($fg_color, 20%);
72 $unfocused_fg_color: $backdrop_fg_color;
73 $unfocused_insensitive_fg_color: lighten($insensitive_fg_color, 20%);
74 $transparent_outline: #383436;
75
76 // Import the default widgets
77 @import 'drawing';
78 // Style everything
79 @import 'common';
80 //Export default colours
81 @import 'colors-public';
82
83 //Override some exported colours
84 @define-color wm_title #{"" + $bg_dark_color};
85 @define-color wm_unfocused_title #{"" + $bg_dark_color};
86 @define-color wm_highlight shade(#{"" + $bg_dark_color}, 1.03);
87 @define-color wm_borders_edge #{"" + $bg_dark_color};
88
89 @define-color wm_bg_a shade(#{$bg_dark_color}, 1.2);
90 @define-color wm_bg_b #{$bg_dark_color};
91
92 @define-color wm_button_hover_color_a shade(#{$bg_dark_color}, 1.3);
93 @define-color wm_button_hover_color_b #{$bg_dark_color};
94 @define-color wm_button_active_color_a shade(#{$bg_dark_color}, 0.85);
95 @define-color wm_button_active_color_b shade(#{$bg_dark_color}, 0.89);
96 @define-color wm_button_active_color_c shade(#{$bg_dark_color}, 0.9);
97
98
99 // And now do our own overrides of styling
100 *:insensitive {
101 -gtk-image-effect: highlight;
102 }
103
104 /***************
105 * Header bars *
106 ***************/
107 .header-bar,
108 .titlebar, GtkApplicationWindow.fullscreen {
109 color: $title_fg;
110 border-width: 0 0 1px;
111 border-style: solid;
112 background-image: linear-gradient(to bottom, $bg_dark_color, lighten($bg_dark_color, 3%) 20%, $bg_dark_color 45%);
113 border-color: shade($bg_dark_color, 0.90);
114 box-shadow: inset 0 2px $titlebar_highlight, inset 0 1px $header_button_border;
115 background-color: $bg_dark_color;
116 }
117 .header-bar:backdrop,
118 .titlebar:backdrop, GtkApplicationWindow.fullscreen:backdrop {
119 color: $fg_dark_color;
120 box-shadow: none;
121 background-color: $bg_dark_color;
122 background-image: none;
123 border-color: darken($bg_dark_color, 10%);
124 }
125
126 /* this is the default titlebar that is added by GTK
127 * when client-side decorations are in use and the application
128 * did not set a custom titlebar.
129 */
130 .header-bar .separator,
131 .titlebar .separator {
132 border-width: 1px;
133 border-style: solid;
134 border-image: none;
135 color: $header_separator;
136
137 }
138
139 .titlebar.default-decoration {
140 border: none;
141 box-shadow: none;
142 }
143
144 .titlebar .title {
145 font: Bold 11;
146 background: none;
147 color: $title_fg;
148 }
149
150 .titlebar .title:backdrop {
151 color: $fg_dark_color;
152 }
153 .header-bar .button.titlebutton:active,
154 .titlebar .button.titlebutton:active,
155 .header-bar .button.titlebutton:checked,
156 .titlebar .button.titlebutton:checked
157
158 .header-bar .button:active,
159 .header-bar .button.titlebutton:active,
160 .titlebar .button.titlebutton:active,
161 .header-bar .button:checked,
162 .header-bar .button.titlebutton:checked,
163 .titlebar .button.titlebutton:checked,
164 .header-bar .button:active:hover,
165 .header-bar .button.titlebutton:active:hover,
166 .titlebar .button.titlebutton:active:hover,
167 .header-bar .button:checked:hover,
168 .header-bar .button.titlebutton:checked:hover,
169 .titlebar .button.titlebutton:checked:hover,
170 .header-bar .button,
171 .header-bar .titlebutton.button,
172 .titlebar .titlebutton.button {
173 color: $fg_dark_color;
174 background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
175 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
176 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
177 border-color: $header_button_border;
178 outline-color: $header_button_raised_gradient_color_a;
179 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
180 }
181 .header-bar .titlebutton.button,
182 .titlebar .titlebutton.button {
183 border-color: transparent;
184 box-shadow: none;
185 background-image: none;
186 }
187 .header-bar .button:insensitive,
188 .header-bar .titlebutton.button:insensitive,
189 .titlebar .titlebutton.button:insensitive,
190 .header-bar .button:insensitive:backdrop,
191 .header-bar .titlebutton.button:insensitive:backdrop,
192 .titlebar .titlebutton.button:insensitive:backdrop {
193 color: $insensitive_dark_fg_color;
194 background-image: none;
195 box-shadow: none;
196 }
197
198 .header-bar .button:hover,
199 .header-bar .button.titlebutton:hover,
200 .titlebar .button.titlebutton:hover {
201 color: shade($fg_dark_color, 1.3);
202 outline-color: $header_button_raised_gradient_color_a;
203 border-color: $header_button_border;
204 background-image: linear-gradient(to bottom, shade($header_button_raised_gradient_color_a, 1.1), shade($bg_dark_color, 1.1));
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 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; }
208
209 .header-bar .button:active,
210 .header-bar .button.titlebutton:active,
211 .titlebar .button.titlebutton:active,
212 .header-bar .button:checked,
213 .header-bar .button.titlebutton:checked,
214 .titlebar .button.titlebutton:checked,
215 .header-bar .button:active:hover,
216 .header-bar .button.titlebutton:active:hover,
217 .titlebar .button.titlebutton:active:hover,
218 .header-bar .button:checked:hover,
219 .header-bar .button.titlebutton:checked:hover,
220 .titlebar .button.titlebutton:checked:hover {
221 color: $title_fg;
222 background-image: linear-gradient(to bottom, $bg_dark_color, $header_button_checked);
223 }
224 .header-bar .button:backdrop,
225 .header-bar .button.titlebutton:backdrop,
226 .titlebar .button.titlebutton:backdrop {
227 background-image: none;
228 background-color: $bg_dark_color;
229 border-color: transparent;
230 box-shadow:none;
231 text-shadow: none;
232 icon-shadow: none;
233 color: $fg_dark_color;
234 }
235 .header-bar .button:backdrop {
236 border-color: $header_button_border_unfocused
237 }
238
239 .header-bar .button:active:backdrop,
240 .header-bar .button.titlebutton:active:backdrop,
241 .titlebar .button.titlebutton:active:backdrop,
242 .header-bar .button:checked:backdrop,
243 .header-bar .button.titlebutton:checked:backdrop,
244 .titlebar .button.titlebutton:checked:backdrop,
245 .header-bar .button:active:hover:backdrop,
246 .header-bar .button.titlebutton:active:hover:backdrop,
247 .titlebar .button.titlebutton:active:hover:backdrop,
248 .header-bar .button:checked:hover:backdrop,
249 .header-bar .button.titlebutton:checked:hover:backdrop,
250 .titlebar .button.titlebutton:checked:hover:backdrop {
251 color: $fg_dark_color;
252 background-image: none;
253 background-color: $header_button_checked;
254 box-shadow:none;
255 text-shadow: none;
256 icon-shadow: none;
257 }
258 .header-bar .suggested-action.button,
259 .header-bar .suggested-action.titlebutton.button,
260 .titlebar .suggested-action.titlebutton.button {
261 color: $title_fg;
262 background-color: mix($selected_bg_color, $bg_dark_color, 80%);
263 background-image: linear-gradient(to bottom, mix($selected_bg_color, $header_button_raised_gradient_color_a, 80%), mix($selected_bg_color, $bg_dark_color, 80%));
264 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
265 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
266 border-color: mix($selected_bg_color, $header_button_border, 30%);
267 outline-color: $header_button_raised_gradient_color_a;
268 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a;
269 }
270
271 .header-bar .suggested-action.button:backdrop,
272 .header-bar .suggested-action.titlebutton.button:backdrop,
273 .titlebar .suggested-action.titlebutton.button:backdrop {
274 background-image: none;
275 text-shadow: none;
276 icon-shadow: none;
277 border-color: transparent;
278 outline-color: transparent;
279 box-shadow: none;
280 }
281
282 .header-bar .suggested-action.button:hover,
283 .header-bar .suggested-action.button.titlebutton:hover,
284 .titlebar .suggested-action.button.titlebutton:hover {
285 color: shade($fg_dark_color, 1.3);
286 outline-color: $header_button_raised_gradient_color_a;
287 border-color: $header_button_border;
288 background-image: linear-gradient(to bottom, shade(mix($selected_bg_color, $header_button_raised_gradient_color_a, 80%), 1.1), shade(mix($selected_bg_color,$bg_dark_color,80%), 1.1));
289 text-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
290 icon-shadow: 0 1px transparentize($header_button_raised_gradient_color_a, 0.5);
291 box-shadow: inset 0 1px $header_button_raised_gradient_color_a, 0 1px $header_button_raised_gradient_color_a; }
292 .header-bar .suggested-action.titlebutton.button:backdrop:insensitive,
293 .titlebar .suggested-action.titlebutton.button:backdrop:insensitive,
294 .header-bar .suggested-action.button:backdrop:insensitive,
295 .titlebar .suggested-action.button:backdrop:insensitive {
296 color: mix($fg_dark_color, $bg_dark_color, 60%);
297 background-image: none;
298 background-color: $bg_dark_color;
299 border-color: transparent;
300 }
301 .header-bar .suggested-action.titlebutton.button:insensitive,
302 .titlebar .suggested-action.titlebutton.button:insensitive,
303 .header-bar .suggested-action.button:insensitive,
304 .titlebar .suggested-action.button:insensitive {
305 color: mix($fg_dark_color, $bg_dark_color, 60%);
306 background-image: linear-gradient(to bottom, $header_button_raised_gradient_color_a, $bg_dark_color);
307 background-color: $bg_dark_color;
308 border-color: transparent;
309 }
310
311 .titlebar .header-bar-separator, .titlebar > GtkBox > .separator.vertical,
312 GtkPlacesSidebar.sidebar .view .titlebar > GtkBox > .vertical.separator:backdrop,
313 .header-bar .header-bar-separator,
314 .header-bar > GtkBox > .separator.vertical,
315 GtkPlacesSidebar.sidebar .view .header-bar > GtkBox > .vertical.separator:backdrop {
316 border-image: linear-gradient(to bottom, transparentize($header_separator, 0), $header_separator 30%, $header_separator 70%, transparentize($header_separator, 0) 100%) 0 1/0 1px stretch;
317 }
318 .titlebar .header-bar-separator:backdrop, .titlebar > GtkBox > .separator.vertical:backdrop,
319 .header-bar .header-bar-separator:backdrop,
320 .header-bar > GtkBox > .separator.vertical:backdrop {
321 border-image: linear-gradient(to bottom, transparentize($header_separator, 0.5)) 0 1/1px 1px;
322 }
323
324 column-header .button, column-header .header-bar .button.titlebutton, .header-bar column-header .button.titlebutton,
325 column-header .titlebar .button.titlebutton,
326 .titlebar column-header .button.titlebutton {
327 color: $fg_color;
328 background-color: $bg_gradient_2;}
329 column-header .button:hover, column-header .header-bar .button.titlebutton:hover, .header-bar column-header .button.titlebutton:hover,
330 column-header .titlebar .button.titlebutton:hover,
331 .titlebar column-header .button.titlebutton:hover {
332 color: $fg_color_emphasis; }
333
334 // Somehow, our notebook tabs don't appear to be classed ".label",
335 // so we have to bodge it with GtkLabel directly
336 .notebook {
337 // Through me you go to the grief wracked city;
338 // Through me you go to everlasting pain;
339 // Through me you go a pass among lost souls.
340 // ...
341 // Abandon all hope — Ye Who Enter Here
342 tab {
343 GtkLabel { //tab text
344 padding: 0 2px; // needed for a nicer focus ring
345 font-weight: bold;
346 color: $insensitive_fg_color;
347 &:backdrop, &.prelight-page:backdrop {
348 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
349 }
350 }
351 .prelight-page GtkLabel, GtkLabel.prelight-page {
352 // prelight tab text
353 color: mix($fg_color, $insensitive_fg_color, 50%);
354 &:backdrop { // FIXME, it's the same as .label:backdrop up here
355 color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
356 }
357 }
358 .active-page GtkLabel, GtkLabel.active-page {
359 // active tab text
360 color: $fg_color;
361 &:backdrop { color: $backdrop_fg_color; }
362 }
363 }
364 }
365
366 .popover {
367 background-color: $bg_color;
368 }
369 .popover .menuitem.button { border: none; box-shadow: none; outline: none; }
370 .menu {
371 background-color: $bg_color;
372 .csd & {
373 border: 1px solid $borders_color;
374 }
375 }
376 .background {
377 background-color: $bg_color;
378 }
379
380 .entry, .linked.vertical > .entry, .linked.vertical > .entry:first-child, .linked.vertical > .entry:last-child {
381 background-image: entry_gradient($text_input_color);
382 background-color: $text_input_color;
383
384 &:focus { background-image: entry_gradient($text_input_color); }
385 &:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); }
386 &:backdrop { background-image: none; background-color: $backdrop_text_input_color; }
387 &:backdrop:insensitive { background-image: linear-gradient(to bottom, $insensitive_bg_color); }
388 }
389 GtkPaned {
390 border: 1px solid $borders_color;
391 }
392 GtkPlacesSidebar.sidebar .view {
393 color: $fg_color;
394 background-color: transparent;
395 }
396
397 .view, .list, .list-row, .list-row.button {
398 color: $text_color;
399 background-color: $text_input_color;
400 &:backdrop, &:backdrop:hover {
401 color: $backdrop_text_color;
402 background-color: $backdrop_text_input_color;
403 }
404 &:selected {
405 color: $selected_fg_color;
406 background-color: $selected_bg_color;
407 }
408 &:hover {
409 background-color: mix($fg_color, $text_input_color, 5%);
410 }
411 &:active {
412 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
413 }
414 &:selected {
415 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
416 &:hover {
417 background-color: mix($fg_color, $selected_bg_color, 10%);
418 }
419 &:backdrop { background-color: $selected_bg_color; }
420 }
421 }
422 .list-row {
423 // Set sidebar items back to something reasonable
424 &.sidebar-item {
425 background-color: $sidebar_bg_color;
426 border-color: $borders_color;
427 &:backdrop, &:backdrop:hover {
428 background-color: $backdrop_sidebar_bg_color;
429 border-color: $backdrop_borders_color;
430 }
431 // let's take care of background colors
432 &:hover {
433 background-color: mix($fg_color, $base_color, 5%);
434 }
435 &:active {
436 box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
437 }
438 &:selected {
439 background-color: $selected_bg_color;
440 &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
441 &:hover {
442 background-color: mix($fg_color, $selected_bg_color, 10%);
443 }
444 &:backdrop { background-color: $selected_bg_color; }
445 }
446 }
447 }
448 .sidebar .list {
449 background-color: $sidebar_bg_color;
450 border-color: $borders_color;
451 &:backdrop {
452 background-color: $backdrop_sidebar_bg_color;
453 border-color: $backdrop_borders_color;
454 }
455 }
456
457 /*.list .list-row.button {
458 &:hover, &:backdrop:insensitive {
459 background-color: rgba(0,0,0,0);
460 }
461 }*/
462
463
464 /*GtkPlacesSidebar .separator { color: $insensitive_fg_color; }*/
465
466
467 // Fix the rubberband background after we gave lists and views a lighter background
468 .view.rubberband {
469 background-color: transparentize($selected_bg_color,0.8);
470 }
471 .menubar {
472 background-color: $bg_dark_color;
473 color: $menu_fg_dark_color;
474 box-shadow: inset 0 -1px transparentize(black, 0.9);
475 &:backdrop { background-color: $bg_dark_color; }
476 }
477 .menubar, .header-bar {
478 & .menu { background-color: $bg_dark_color;
479 color: $menu_fg_dark_color; border-color: $header_button_border; }
480 & > .menuitem {
481 &:hover { //Seems like it :hover even with keyboard focus
482 box-shadow: inset 0 -3px $selected_bg_color;
483 color: $fg_dark_color;
484 }
485 &:insensitive {
486 color: $insensitive_fg_color;
487 box-shadow: none;
488 }
489 }
490 }
491 .tweak-group .button.list-row, .tweak-categories .tweak-category.list-row {
492 color: $fg_color;
493 background-color: $bg_color;
494 &:hover {
495 background-color: mix($fg_color, $base_color, 5%);
496 }
497 &:backdrop { background-color: $backdrop_bg_color }
498 &:selected {
499 background-color: $selected_bg_color;
500 color: $selected_fg_color;
501 &:hover {
502 background-color: mix($fg_color, $selected_bg_color, 10%);
503 }
504 }
505 }
506 .floating-bar {
507 opacity: 0.9;
508 color: $text_color;
509 background-color: $text_input_color;
510 border: 1px solid $borders_color;
511
512 @each $tb,$tb_corner in ('top','bottom'),
513 ('bottom','top') {
514 @each $lr,$lr_corner in ('left','right'),
515 ('right','left') {
516 &.#{$tb}.#{$lr} {
517 border-#{$tb_corner}-#{$lr_corner}-radius: 3px;
518 border-#{$tb}-width: 0;
519 border-#{$lr}-width: 0;
520 }
521 }
522 }
523 }
524 .menu .menuitem.check, .menu .menuitem.radio {
525 color: $fg_dark_color;
526 }
527
528
529 /* Fix Meld dialog buttons and try not to break anything else */
530 .message-dialog.csd .dialog-action-area .button {
531 border-bottom-style: solid;
532 &:last-child {
533 border-right-style: solid;
534 border-top-right-radius: 7px; }
535 &:first-child {
536 border-left-style: solid;
537 border-top-left-radius: 7px; }
538 &:hover, &:backdrop { border-bottom-style: solid; }
539 }
540
541 /* And put "linked" buttons back to Adwaita style */
542 .message-dialog.csd .dialog-action-area.linked .button {
543 border-bottom-style: none;
544 &:last-child {
545 border-right-style: none;
546 border-top-right-radius: 0; }
547 &:first-child {
548 border-left-style: none;
549 border-top-left-radius: 0; }
550 &:hover, &:backdrop { border-bottom-style: none; }
551 }
552
553 /* Fix tree view progress bars */
554 GtkTreeView.view {
555 &.progressbar { // progress bar in treeviews
556 color: $selected_fg_color;
557 background-color: $selected_bg_color;
558
559 &:selected {
560 color: darken($selected_bg_color,20%);
561 &:backdrop {
562 color: darken($selected_bg_color,20%);
563 }
564 }
565
566 &:backdrop {
567 @if $variant == 'light' { color: $backdrop_base_color; }
568 @else { border-color: $backdrop_base_color; }
569 background-image: none;
570 box-shadow: none;
571 }
572 }
573 }
574
575 /*
576 * Fix text views that don't specify a class.
577 * Happens mainly in Meld when viewing single files
578 */
579 GtkTextView {
580 background-color: #eee
581 }