← Back to branch summary

~ubuntukylin-members/ubuntukylin-theme/ubuntukylin-theme

« back to all changes in this revision

Viewing changes to ukui-blue/gtk-3.0/_drawing.scss

  • Committer: lihao
  • Date: 2018-03-17 06:22:50 UTC
  • Revision ID: lihao@kylinos.cn-20180317062250-5rhdv41bmdxq5xiv
1.7.5

Add ukui-blue theme
Update several icons
add ukui-main-menu icon

Show diffs side-by-side

added added

removed removed

Lines of Context:
ukui-blue/gtk-3.0/_drawing.scss
 
1
// Drawing mixins
 
2
 
 
3
// generic drawing of more complex things
 
4
 
 
5
@function _widget_edge($c: $borders_edge) {
 
6
    // outer highlight "used" on most widgets
 
7
    @if $c == none {
 
8
        @return none;
 
9
    }
 
10
    @else {
 
11
        @return 0 1px $c;
 
12
    }
 
13
}
 
14
 
 
15
@mixin _shadows($list...) {
 
16
    //
 
17
    // Helper mixin to stack up to box-shadows;
 
18
    //
 
19
    $shadows: null;
 
20
 
 
21
    @each $shadow in $list {
 
22
        @if $shadow != none {
 
23
            $shadows: $shadows, $shadow;
 
24
        }
 
25
    }
 
26
 
 
27
    box-shadow: $shadows;
 
28
}
 
29
 
 
30
// entries
 
31
@function entry_focus_border($fc: $selected_bg_color) {
 
32
    @return $fc;
 
33
}
 
34
 
 
35
@function entry_focus_shadow($fc: $selected_bg_color) {
 
36
    @return inset 0 0 0 1px $fc;
 
37
}
 
38
 
 
39
@mixin entry($t, $fc: $selected_bg_color, $edge: none) {
 
40
    //
 
41
    // Entries drawing function
 
42
    //
 
43
    // $t: entry type
 
44
    // $fc: focus color
 
45
    // $edge: set to none to not draw the bottom edge or specify a color to not
 
46
    //        use the default one
 
47
    //
 
48
    // possible $t values:
 
49
    // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
 
50
    //
 
51
 
 
52
    $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
 
53
    $_entry_edge: if($edge == none, none, _widget_edge($edge));
 
54
 
 
55
    @if $t == normal {
 
56
        color: $base_normal_fg_color;
 
57
        border-color: $base_normal_border_color;
 
58
        background-color: $base_normal_bg_color;
 
59
 
 
60
        // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
 
61
    }
 
62
 
 
63
    @if $t == focus {
 
64
        border-color: $base_focused_border_color;
 
65
    }
 
66
 
 
67
    @if $t == insensitive {
 
68
        color: $base_insensitive_fg_color;
 
69
        border-color: $base_insensitive_border_color;
 
70
        background-color: $base_insensitive_bg_color;
 
71
        box-shadow: $_entry_edge;
 
72
    }
 
73
 
 
74
    @if $t == backdrop {
 
75
        color: $backdrop_text_color;
 
76
        border-color: $backdrop_borders_color;
 
77
        background-color: $backdrop_base_color;
 
78
        box-shadow: $_blank_edge;
 
79
    }
 
80
 
 
81
    @if $t == backdrop-insensitive {
 
82
        color: $backdrop_insensitive_color;
 
83
        border-color: $backdrop_borders_color;
 
84
        background-color: $insensitive_bg_color;
 
85
        box-shadow: $_blank_edge;
 
86
    }
 
87
 
 
88
    @if $t == osd {
 
89
        color: $osd_text_color;
 
90
        border-color: $osd_borders_color;
 
91
        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
 
92
        background-clip: padding-box;
 
93
        box-shadow: none;
 
94
        text-shadow: 0 1px black;
 
95
        -gtk-icon-shadow: 0 1px black;
 
96
    }
 
97
 
 
98
    @if $t == osd-focus {
 
99
        color: $osd_text_color;
 
100
        border-color: $selected_bg_color;
 
101
        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
 
102
        background-clip: padding-box;
 
103
        box-shadow: entry_focus_shadow($fc);
 
104
        text-shadow: 0 1px black;
 
105
        -gtk-icon-shadow: 0 1px black;
 
106
    }
 
107
 
 
108
    @if $t == osd-insensitive {
 
109
        color: $osd_insensitive_fg_color;
 
110
        border-color: $osd_borders_color;
 
111
        background-color: $osd_insensitive_bg_color;
 
112
        background-clip: padding-box;
 
113
        box-shadow: none;
 
114
        text-shadow: none;
 
115
        -gtk-icon-shadow: none;
 
116
    }
 
117
 
 
118
    @if $t == osd-backdrop {
 
119
        color: $osd_text_color;
 
120
        border-color: $osd_borders_color;
 
121
        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
 
122
        background-clip: padding-box;
 
123
        box-shadow: none;
 
124
        text-shadow: none;
 
125
        -gtk-icon-shadow: none;
 
126
    }
 
127
}
 
128
 
 
129
// buttons
 
130
 
 
131
@function _border_color($c, $darker: false) {
 
132
    @if $darker == true {
 
133
        @return darken($c, 30%);
 
134
    }
 
135
    @else {
 
136
        @return darken($c, 20%);
 
137
    }
 
138
}
 
139
 
 
140
@function _text_shadow_color($tc: $fg_color, $bg: $bg_color) {
 
141
    //
 
142
    // calculate the color of text shadows
 
143
    //
 
144
    // $tc is the text color
 
145
    // $bg is the background color
 
146
    //
 
147
    $_lbg: lightness($bg) / 100%;
 
148
 
 
149
    @if lightness($tc) < 50% {
 
150
        @return transparentize(white, 1 - $_lbg / ($_lbg * 1.3));
 
151
    }
 
152
    @else {
 
153
        @return transparentize(black, $_lbg * 0.8);
 
154
    }
 
155
}
 
156
 
 
157
@function _button_hilight_color($c) {
 
158
    //
 
159
    // calculate the right top hilight color for buttons
 
160
    //
 
161
    // $c: base color;
 
162
    //
 
163
    @if lightness($c) > 95% {
 
164
        @return white;
 
165
    }
 
166
    @else if lightness($c) > 90% {
 
167
        @return transparentize(white, 0.2);
 
168
    }
 
169
    @else if lightness($c) > 80% {
 
170
        @return transparentize(white, 0.4);
 
171
    }
 
172
    @else if lightness($c) > 50% {
 
173
        @return transparentize(white, 0.6);
 
174
    }
 
175
    @else if lightness($c) > 40% {
 
176
        @return transparentize(white, 0.8);
 
177
    }
 
178
    @else {
 
179
        @return transparentize(white, 0.95);
 
180
    }
 
181
}
 
182
 
 
183
@mixin _button_text_shadow($tc: $fg_color, $bg: $bg_color) {
 
184
    //
 
185
    // helper function for the text emboss effect
 
186
    //
 
187
    // $tc is the optional text color, not the shadow color
 
188
    //
 
189
    // TODO: this functions needs a way to deal with special cases
 
190
    //
 
191
 
 
192
    $_shadow: _text_shadow_color($tc, $bg);
 
193
 
 
194
    @if lightness($tc) < 50% {
 
195
        text-shadow: 0 1px $_shadow;
 
196
        -gtk-icon-shadow: 0 1px $_shadow;
 
197
    }
 
198
    @else {
 
199
        text-shadow: 0 -1px $_shadow;
 
200
        -gtk-icon-shadow: 0 -1px $_shadow;
 
201
    }
 
202
}
 
203
 
 
204
@mixin button($t, $c: $bg_color, $tc: $fg_color, $edge: none) {
 
205
    //
 
206
    // Button drawing function
 
207
    //
 
208
    // $t:    button type,
 
209
    // $c:    base button color for colored* types
 
210
    // $tc:   optional text color for colored* types
 
211
    // $edge: set to none to not draw the bottom edge or specify a color to not
 
212
    //        use the default one
 
213
    //
 
214
    // possible $t values:
 
215
    // normal, hover, active, insensitive, insensitive-active,
 
216
    // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
 
217
    // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 
218
    //
 
219
    // This mixin sets the $button_fill global variable which containts the button background-image
 
220
    //
 
221
    $_hilight_color: _button_hilight_color($c);
 
222
    $_button_edge: if($edge == none, none, _widget_edge($edge));
 
223
    $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge, 1)));
 
224
 
 
225
    @if $t == normal {
 
226
        //
 
227
        // normal button
 
228
        //
 
229
        color: $tc;
 
230
        outline-color: transparentize($tc, 0.7);
 
231
        border-color: $base_normal_border_color;
 
232
 
 
233
        $button_fill: linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)) !global;
 
234
 
 
235
        background-image: $button_fill;
 
236
 
 
237
        @include _button_text_shadow($tc, $c);
 
238
    }
 
239
    @else if $t == hover {
 
240
        //
 
241
        // hovered button
 
242
        //
 
243
        color: $tc;
 
244
        outline-color: transparentize($tc, 0.7);
 
245
        border-color: $base_prelight_border_color;
 
246
 
 
247
        $button_fill: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%)) !global;
 
248
 
 
249
        @include _button_text_shadow($tc, lighten($c, 6%));
 
250
 
 
251
        background-image: $button_fill;
 
252
    }
 
253
 
 
254
    @if $t == normal-alt {
 
255
        //
 
256
        // normal button alternative look
 
257
        //
 
258
        color: $tc;
 
259
        outline-color: transparentize($tc, 0.7);
 
260
        border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
 
261
 
 
262
        @include _button_text_shadow($tc, $c);
 
263
 
 
264
        background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
 
265
    }
 
266
    @else if $t == hover-alt {
 
267
        //
 
268
        // hovered button alternative look
 
269
        //
 
270
        color: $tc;
 
271
        outline-color: transparentize($tc, 0.7);
 
272
        border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
 
273
 
 
274
        $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
 
275
 
 
276
        background-image: $button_fill;
 
277
    }
 
278
    @else if $t == active {
 
279
        //
 
280
        // pushed button
 
281
        //
 
282
        color: $tc;
 
283
        outline-color: transparentize($tc, 0.7);
 
284
        border-color: $base_active_border_color;
 
285
 
 
286
        $button_fill: image(darken($c, 6%)) !global;
 
287
 
 
288
        background-image: $button_fill;
 
289
        text-shadow: none;
 
290
        -gtk-icon-shadow: none;
 
291
    }
 
292
    @else if $t == insensitive {
 
293
        //
 
294
        // insensitive button
 
295
        //
 
296
        $_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
 
297
 
 
298
        label, & {
 
299
            color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
 
300
        }
 
301
 
 
302
        border-color: $base_insensitive_border_color;
 
303
 
 
304
        $button_fill: image($_bg) !global;
 
305
 
 
306
        background-image: $button_fill;
 
307
        text-shadow: none;
 
308
        -gtk-icon-shadow: none;
 
309
 
 
310
        // white with 0 alpha to avoid an ugly transition, since no color means
 
311
        // black with 0 alpha
 
312
    }
 
313
    @else if $t == insensitive-active {
 
314
        //
 
315
        // insensitive pushed button
 
316
        //
 
317
        $_bg: darken(mix($c, $base_color, 85%), 8%);
 
318
        $_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
 
319
 
 
320
        label, & {
 
321
            color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color);
 
322
        }
 
323
 
 
324
        border-color: $_bc;
 
325
 
 
326
        $button_fill: image($_bg) !global;
 
327
 
 
328
        background-image: $button_fill;
 
329
 
 
330
        // white with 0 alpha to avoid an ugly transition, since no color means
 
331
        // black with 0 alpha
 
332
    }
 
333
    @else if $t == backdrop {
 
334
        //
 
335
        // backdrop button
 
336
        //
 
337
        $_bg: if($c != $bg_color, $c, $backdrop_bg_color);
 
338
        $_bc: $c;
 
339
 
 
340
        label, & {
 
341
            color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
 
342
        }
 
343
 
 
344
        border-color: $base_backdrop_border_color;
 
345
 
 
346
        $button_fill: image($_bg) !global;
 
347
 
 
348
        background-image: $button_fill;
 
349
        text-shadow: none;
 
350
        -gtk-icon-shadow: none;
 
351
    }
 
352
    @else if $t == backdrop-active {
 
353
        //
 
354
        // backdrop pushed button
 
355
        //
 
356
        $_bg: darken(mix($c, $base_color, 85%), 8%);
 
357
        $_bc: $_bg;
 
358
 
 
359
        label, & {
 
360
            color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
 
361
        }
 
362
 
 
363
        border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
 
364
 
 
365
        $button_fill: image($_bg) !global;
 
366
 
 
367
        background-image: $button_fill;
 
368
    }
 
369
    @else if $t == backdrop-insensitive {
 
370
        //
 
371
        // backdrop insensitive button
 
372
        //
 
373
 
 
374
        $_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
 
375
        $_bc: $_bg;
 
376
 
 
377
        label, & {
 
378
            color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
 
379
        }
 
380
 
 
381
        border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
 
382
 
 
383
        $button_fill: image($_bg) !global;
 
384
 
 
385
        background-image: $button_fill;
 
386
        text-shadow: none;
 
387
        -gtk-icon-shadow: none;
 
388
 
 
389
        // white with 0 alpha to avoid an ugly transition, since no color means
 
390
        // black with 0 alpha
 
391
    }
 
392
    @else if $t == backdrop-insensitive-active {
 
393
        //
 
394
        // backdrop insensitive pushed button
 
395
        //
 
396
 
 
397
        $_bg: darken(mix($c, $base_color, 85%), 8%);
 
398
        $_bc: $_bg;
 
399
 
 
400
        label {
 
401
            color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
 
402
        }
 
403
 
 
404
        border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
 
405
 
 
406
        $button_fill: image($_bg) !global;
 
407
 
 
408
        background-image: $button_fill;
 
409
    }
 
410
    @else if $t == osd {
 
411
        //
 
412
        // normal osd button
 
413
        //
 
414
        $_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
 
415
 
 
416
        color: $osd_fg_color;
 
417
        border-color: $osd_borders_color;
 
418
        background-color: transparent;
 
419
 
 
420
        $button_fill: image($_bg) !global;
 
421
 
 
422
        background-image: $button_fill;
 
423
        background-clip: padding-box;
 
424
        box-shadow: inset 0 1px transparentize(white, 0.9);
 
425
        text-shadow: 0 1px black;
 
426
        -gtk-icon-shadow: 0 1px black;
 
427
        outline-color: transparentize($osd_fg_color, 0.7);
 
428
    }
 
429
    @else if $t == osd-hover {
 
430
        //
 
431
        // active osd button
 
432
        //
 
433
        $_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%));
 
434
 
 
435
        color: white;
 
436
        border-color: $osd_borders_color;
 
437
        background-color: transparent;
 
438
 
 
439
        $button_fill: image($_bg) !global;
 
440
 
 
441
        background-image: $button_fill;
 
442
        background-clip: padding-box;
 
443
        box-shadow: inset 0 1px transparentize(white, 0.9);
 
444
        text-shadow: 0 1px black;
 
445
        -gtk-icon-shadow: 0 1px black;
 
446
        outline-color: transparentize($osd_fg_color, 0.7);
 
447
    }
 
448
    @else if $t == osd-active {
 
449
        //
 
450
        // active osd button
 
451
        //
 
452
        $_bg: if($c != $bg_color, $c, $osd_borders_color);
 
453
 
 
454
        color: white;
 
455
        border-color: $osd_borders_color;
 
456
        background-color: transparent;
 
457
 
 
458
        $button_fill: image($_bg) !global;
 
459
 
 
460
        background-image: $button_fill;
 
461
        background-clip: padding-box;
 
462
        box-shadow: none;
 
463
        text-shadow: none;
 
464
        -gtk-icon-shadow: none;
 
465
        outline-color: transparentize($osd_fg_color, 0.7);
 
466
    }
 
467
    @else if $t == osd-insensitive {
 
468
        //
 
469
        // insensitive osd button
 
470
        //
 
471
        color: $osd_insensitive_fg_color;
 
472
        border-color: $osd_borders_color;
 
473
        background-color: transparent;
 
474
 
 
475
        $button_fill: image($osd_insensitive_bg_color) !global;
 
476
 
 
477
        background-image: $button_fill;
 
478
        background-clip: padding-box;
 
479
        box-shadow: none;
 
480
        text-shadow: none;
 
481
        -gtk-icon-shadow: none;
 
482
    }
 
483
    @else if $t == osd-backdrop {
 
484
        //
 
485
        // backdrop osd button
 
486
        //
 
487
        $_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
 
488
 
 
489
        color: $osd_fg_color;
 
490
        border-color: $osd_borders_color;
 
491
        background-color: transparent;
 
492
 
 
493
        $button_fill: image($_bg) !global;
 
494
 
 
495
        background-image: $button_fill;
 
496
        background-clip: padding-box;
 
497
        box-shadow: none;
 
498
        text-shadow: none;
 
499
        -gtk-icon-shadow: none;
 
500
    }
 
501
    @else if $t == undecorated {
 
502
        //
 
503
        // reset
 
504
        //
 
505
        border-color: transparent;
 
506
        background-color: transparent;
 
507
 
 
508
        $button_fill: none !global;
 
509
 
 
510
        background-image: $button_fill;
 
511
        text-shadow: none;
 
512
        -gtk-icon-shadow: none;
 
513
    }
 
514
}
 
515
 
 
516
@mixin headerbar_fill($c: $headerbar_color, $hc: $top_hilight, $ov: none) {
 
517
    //
 
518
    // headerbar fill
 
519
    //
 
520
    // $c:  base color
 
521
    // $hc: top highlight color
 
522
    // $ov: a background layer for background shorthand (hence no commas!)
 
523
    //
 
524
    $gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px);
 
525
 
 
526
    @if $ov != none {
 
527
        background: $c $ov, $gradient;
 
528
    }
 
529
    @else {
 
530
        background: $c $gradient;
 
531
    }
 
532
 
 
533
    box-shadow: none;
 
534
 
 
535
    // top highlight
 
536
}
 
537
 
 
538
@mixin overshoot($p, $t: normal, $c: $fg_color) {
 
539
    //
 
540
    // overshoot
 
541
    //
 
542
    // $p: position
 
543
    // $t: type
 
544
    // $c: base color
 
545
    //
 
546
    // possible $p values:
 
547
    // top, bottom, right, left
 
548
    //
 
549
    // possible $t values:
 
550
    // normal, backdrop
 
551
    //
 
552
 
 
553
    $_small_gradient_length: 5%;
 
554
    $_big_gradient_length: 100%;
 
555
 
 
556
    $_position: center top;
 
557
    $_small_gradient_size: 100% $_small_gradient_length;
 
558
    $_big_gradient_size: 100% $_big_gradient_length;
 
559
 
 
560
    @if $p == bottom {
 
561
        $_position: center bottom;
 
562
        $_linear_gradient_direction: to top;
 
563
    }
 
564
    @else if $p == right {
 
565
        $_position: right center;
 
566
        $_small_gradient_size: $_small_gradient_length 100%;
 
567
        $_big_gradient_size: $_big_gradient_length 100%;
 
568
    }
 
569
    @else if $p == left {
 
570
        $_position: left center;
 
571
        $_small_gradient_size: $_small_gradient_length 100%;
 
572
        $_big_gradient_size: $_big_gradient_length 100%;
 
573
    }
 
574
 
 
575
    $_small_gradient_color: $c;
 
576
    $_big_gradient_color: $c;
 
577
 
 
578
    @if $c == $fg_color {
 
579
        $_small_gradient_color: darken($borders_color, 10%);
 
580
        $_big_gradient_color: $fg_color;
 
581
 
 
582
        @if $t == backdrop {
 
583
            $_small_gradient_color: $backdrop_borders_color;
 
584
        }
 
585
    }
 
586
 
 
587
    $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1)));
 
588
 
 
589
    $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.93)), to(transparentize($_big_gradient_color, 1)));
 
590
 
 
591
    @if $t == normal {
 
592
        background-image: $_small_gradient, $_big_gradient;
 
593
        background-size: $_small_gradient_size, $_big_gradient_size;
 
594
    }
 
595
    @else if $t == backdrop {
 
596
        background-image: $_small_gradient;
 
597
        background-size: $_small_gradient_size;
 
598
    }
 
599
 
 
600
    background-repeat: no-repeat;
 
601
    background-position: $_position;
 
602
    background-color: transparent;
 
603
 
 
604
    // reset some properties to be sure to not inherit them somehow
 
605
    border: none;
 
606
 
 
607
    //
 
608
    box-shadow: none;
 
609
 
 
610
    //
 
611
}
 
612
 
 
613
@mixin undershoot($p) {
 
614
    //
 
615
    // undershoot
 
616
    //
 
617
    // $p: position
 
618
    //
 
619
    // possible $p values:
 
620
    // top, bottom, right, left
 
621
    //
 
622
 
 
623
    $_undershoot_color_dark: transparentize(black, 0.8);
 
624
    $_undershoot_color_light: transparentize(white, 0.8);
 
625
 
 
626
    $_gradient_dir: left;
 
627
    $_dash_bg_size: 10px 1px;
 
628
    $_gradient_repeat: repeat-x;
 
629
    $_bg_pos: center $p;
 
630
 
 
631
    background-color: transparent;
 
632
 
 
633
    // shouldn't be needed, but better to be sure;
 
634
 
 
635
    @if $p == left or $p == right {
 
636
        $_gradient_dir: top;
 
637
        $_dash_bg_size: 1px 10px;
 
638
        $_gradient_repeat: repeat-y;
 
639
        $_bg_pos: $p center;
 
640
    }
 
641
 
 
642
    background-image: linear-gradient(to $_gradient_dir, $_undershoot_color_light 50%, $_undershoot_color_dark 50%);
 
643
    padding-#{$p}: 1px;
 
644
    background-size: $_dash_bg_size;
 
645
    background-repeat: $_gradient_repeat;
 
646
    background-origin: content-box;
 
647
    background-position: $_bg_pos;
 
648
    border: none;
 
649
    box-shadow: none;
 
650
}
 
 
b'\\ No newline at end of file'