notifications/data/application.css at c8df8daeebf2b91c6d80f9d51b758fae451e4563 · elementary/notifications · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
window,
.titlebar {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.close {
    padding: 3px;
    border: none;
    border-radius: 100%;
    background-image:
        linear-gradient(
            to bottom,
            @BLACK_300,
            @BLACK_500
        );
    box-shadow:
        inset 0 0 0 1px alpha(#fff, 0.02),
        inset 0 1px 0 0 alpha(#fff, 0.07),
        inset 0 -1px 0 0 alpha(#fff, 0.01),
        0 0 0 1px alpha(#000, 0.7),
        0 1px 2px alpha(#000, 0.16),
        0 2px 3px alpha(#000, 0.23);
    margin: 3px;
    -gtk-icon-size: 24px;
}

.close image {
    color: #fff;
    -gtk-icon-shadow: 0 1px 1px alpha(#000, 0.6);
}

.notification stack > box,
.notification stack > grid {
    padding: 6px;
}

.notification progressbar.flat progress {
    background-image: none;
    box-shadow: none;
}

.notification .draw-area {
    margin: 16px;
    background: alpha(@base_color, 0.8);
}

.notification.reduce-transparency .draw-area {
    margin: 16px;
    background: @base_color;
}

.notification:not(.confirmation) .draw-area image {
    -gtk-icon-style: regular;
}

.notification .buttonbox {
    margin-top: 12px;
}

.notification .buttonbox.text-buttons button {
    min-width: 65px;
}

.notification:dir(ltr) .buttonbox button + button {
    margin-left: 6px;
}

.notification:dir(rtl) .buttonbox button + button {
    margin-right: 6px;
}

.urgent image {
    animation: urgent 1.25s ease-in-out;
}

masked-image {
    margin: 5px 4px 3px;
}

@keyframes urgent {
    0% { -gtk-icon-transform: scale(1) rotate(0deg); }
    10% { -gtk-icon-transform: scale(0.8) rotate(30deg); }
    20% { -gtk-icon-transform: scale(1.2) rotate(-30deg); }
    30% { -gtk-icon-transform: scale(1.6) rotate(30deg); }
    40% { -gtk-icon-transform: scale(1.6) rotate(-20deg); }
    50% { -gtk-icon-transform: scale(1.6) rotate(10deg); }
    60% { -gtk-icon-transform: scale(1.6) rotate(-5deg); }
    70% { -gtk-icon-transform: scale(1.2) rotate(2deg); }
    80% { -gtk-icon-transform: scale(1) rotate(0deg); }
    100% { -gtk-icon-transform: scale(1) rotate(0deg); }
}