widget/notifications/Notifications.scss


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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

$rosewater: #f5e0dc;
$flamingo: #f2cdcd;
$pink: #f5c2e7;
$mauve: #cba6f7;
$red: #f38ba8;
$maroon: #eba0ac;
$peach: #fab387;
$yellow: #f9e2af;
$green: #a6e3a1;
$teal: #94e2d5;
$sky: #89dceb;
$sapphire: #74c7ec;
$blue: #89b4fa;
$lavender: #b4befe;

$text: #cdd6f4;
$subtext1: #bac2de;
$subtext0: #a6adc8;

$overlay2: #9399b2;
$overlay1: #7f849c;
$overlay0: #6c7086;

$surface2: #585b70;
$surface1: #45475a;
$surface0: #313244;

$base: #1e1e2e;
$mantle: #181825;
$crust: #11111b;

window.Notifications {
  box.Notification {
    margin: .25rem 1rem;
    border: 1px solid $blue;
    border-radius: 5px;
    min-width: 300px;

    background-color: $base;

    separator {
      background: $blue;
    }

    &.low {
      border-color: $overlay1;

      separator {
        background: $overlay1;
      }
    }

    &.critical {
      border-color: $red;

      separator {
        background: $red;
      }
    }

    &:first-child {
      margin-top: 1rem;
    }

    &:last-child {
      margin-bottom: 1rem;
    }

    box.Header {
      label.Application {
        margin-top: .25rem;
        margin-left: .5rem;

        color: $text;

        font-weight: bold;
      }

      label.Time {
        margin: .25rem .25rem 0 1rem;

        color: $subtext1;
      }

      button.Close {
        margin: 0;
        border: 0;
        border-radius: 0;
        padding: 5px;
        min-width: 0;
        min-height: 0;

        background: none;

        image {
          background-color: $red;
          border-radius: 50%;
          color: $red;
        }
      }
    }

    box.Contents {
      margin: .5rem;

      label.Summary {
        color: $text;

        font-weight: bold;
      }

      label.Body {
        color: $subtext1;
      }
    }

    box.Actions {
      button {
        margin: 0 .25rem;
        border: 0;
        border-radius: 0;
        padding: 5px;
        min-width: 0;
        min-height: 0;

        background: none;
        color: $text;

        font-weight: bold;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}