Skip to content

Commit f8bc219

Browse files
BHARATH0153BHARATH0153
committed
[chores] Use theme colors from openwisp-utils variables #425 
1 parent f591b4e commit f8bc219

4 files changed

Lines changed: 74 additions & 66 deletions

File tree

‎openwisp_notifications/static/openwisp-notifications/css/loader.css‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,20 @@
66
width: 10em;
77
height: 10em;
88
border-radius: 50%;
9-
background: #464646;
10-
background: -moz-linear-gradient(left, #464646 10%, rgba(70, 70, 70, 0) 42%);
11-
background: -webkit-linear-gradient(left, #464646 10%, rgba(70, 70, 70, 0) 42%);
12-
background: -o-linear-gradient(left, #464646 10%, rgba(70, 70, 70, 0) 42%);
13-
background: -ms-linear-gradient(left, #464646 10%, rgba(70, 70, 70, 0) 42%);
14-
background: linear-gradient(to right, #464646 10%, rgba(70, 70, 70, 0) 42%);
9+
background: var(--ow-color-fg-darker);
10+
background: -moz-linear-gradient(
11+
left,
12+
var(--ow-color-fg-darker) 10%,
13+
transparent 42%
14+
);
15+
background: -webkit-linear-gradient(
16+
left,
17+
var(--ow-color-fg-darker) 10%,
18+
transparent 42%
19+
);
20+
background: -o-linear-gradient(left, var(--ow-color-fg-darker) 10%, transparent 42%);
21+
background: -ms-linear-gradient(left, var(--ow-color-fg-darker) 10%, transparent 42%);
22+
background: linear-gradient(to right, var(--ow-color-fg-darker) 10%, transparent 42%);
1523
position: relative;
1624
-webkit-animation: load3 1.4s infinite linear;
1725
animation: load3 1.4s infinite linear;
@@ -22,15 +30,15 @@
2230
.loader:before {
2331
width: 50%;
2432
height: 50%;
25-
background: #464646;
33+
background: var(--ow-color-fg-darker);
2634
border-radius: 100% 0 0 0;
2735
position: absolute;
2836
top: 0;
2937
left: 0;
3038
content: "";
3139
}
3240
.loader:after {
33-
background: #ffffff;
41+
background: var(--ow-color-white);
3442
width: 75%;
3543
height: 75%;
3644
border-radius: 50%;

‎openwisp_notifications/static/openwisp-notifications/css/notifications.css‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,25 @@
2222
mask-size: 22px;
2323
-webkit-mask-size: 22px;
2424
border: 0px;
25-
background: #777;
25+
background: var(--ow-color-fg-dark);
2626
}
2727
.ow-notifications.toggle-btn:hover #ow-notification-btn,
2828
.ow-notifications:focus #ow-notification-btn {
29-
background: #df5d43;
29+
background: var(--ow-color-primary);
3030
}
3131
#ow-notification-count {
3232
position: absolute;
3333
top: -4px;
3434
left: 30px;
3535
min-width: 15px;
3636
height: 15px;
37-
background-color: #df5d43;
37+
background-color: var(--ow-color-primary);
3838
display: flex;
3939
justify-content: center;
4040
align-items: center;
4141
padding: 2px 3px;
4242
border-radius: 6px;
43-
color: #fff;
43+
color: var(--ow-color-white);
4444
font-size: 10px;
4545
box-shadow: 0px 0px 3px #ffffff82 inset;
4646
}
@@ -68,37 +68,37 @@
6868
text-transform: none;
6969
display: none;
7070
cursor: pointer;
71-
border: #fff solid 1px;
71+
border: var(--ow-color-white) solid 1px;
7272
padding: 0.3em 0 0.3em 1em;
7373
border-radius: 4px;
7474
font-size: 12px;
75-
border-color: rgba(0, 0, 0, 0.25);
75+
border-color: var(--ow-overlay-25);
7676
}
7777
#container .ow-notification-toast a {
7878
border-bottom: 0 none;
7979
}
8080
.ow-notification-toast.info,
8181
.ow-notification-toast.warning {
82-
background-color: #ededed;
83-
color: #333333;
82+
background-color: var(--ow-color-fg-light);
83+
color: var(--ow-color-fg-darker);
8484
}
8585
#container .ow-notification-toast.info a,
8686
#container .ow-notification-toast.warning a {
87-
color: #df5d43;
87+
color: var(--ow-color-primary);
8888
}
8989
.ow-notification-toast.error {
90-
background-color: #d04124;
91-
color: #fff;
92-
border-color: rgba(0, 0, 0, 0);
90+
background-color: var(--ow-color-danger);
91+
color: var(--ow-color-white);
92+
border-color: transparent;
9393
}
9494
#container .ow-notification-toast.error a,
9595
#container .ow-notification-toast.success a {
96-
color: #fff;
96+
color: var(--ow-color-white);
9797
}
9898
.ow-notification-toast.success {
99-
background-color: #1c8828;
100-
color: #fff;
101-
border-color: rgba(0, 0, 0, 0);
99+
background-color: var(--ow-color-success);
100+
color: var(--ow-color-white);
101+
border-color: transparent;
102102
}
103103
.ow-notification-toast > div {
104104
display: flex;
@@ -138,15 +138,15 @@
138138
text-align: left;
139139
width: 425px;
140140
text-transform: none;
141-
background-color: #fff;
141+
background-color: var(--ow-color-white);
142142
border-radius: 8px;
143143
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.12);
144-
border: 1px solid rgba(0, 0, 0, 0.07);
144+
border: 1px solid var(--ow-overlay-7);
145145
font-size: 12px;
146146
top: 49px;
147147
}
148148
.ow-notification-dropdown .toggle-btn {
149-
color: #777 !important;
149+
color: var(--ow-color-fg-dark) !important;
150150
text-decoration: none !important;
151151
}
152152
.ow-notification-dropdown .toggle-btn:active {
@@ -158,11 +158,11 @@
158158
display: flex;
159159
justify-content: space-between;
160160
font-weight: 500;
161-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
161+
border-bottom: 1px solid var(--ow-overlay-10);
162162
}
163163
.ow-notification-dropdown .disabled {
164-
color: rgba(0, 0, 0, 0.4) !important;
165-
background: #dfdfdf;
164+
color: var(--ow-overlay-40) !important;
165+
background: var(--ow-color-fg-light);
166166
pointer-events: none;
167167
}
168168
.ow-notification-wrapper {
@@ -175,12 +175,12 @@
175175
cursor: pointer;
176176
padding: 0;
177177
transition: 0.4s;
178-
color: #333333;
178+
color: var(--ow-color-fg-darker);
179179
font-weight: bold;
180180
}
181181
.ow-notification-elem.unread {
182-
background: rgba(0, 0, 0, 0.72);
183-
color: #fff;
182+
background: var(--ow-overlay-90);
183+
color: var(--ow-color-white);
184184
}
185185
.ow-notification-elem p {
186186
margin: 5px auto 0px auto;
@@ -189,35 +189,35 @@
189189
.ow-notification-meta {
190190
display: flex;
191191
justify-content: space-between;
192-
color: #777;
192+
color: var(--ow-color-fg-dark);
193193
-webkit-text-stroke: 0.2px white;
194194
padding: 1px 0px;
195195
}
196196
.ow-notification-date {
197197
font-weight: normal;
198198
}
199199
.ow-notification-elem a {
200-
color: #df5d43 !important;
200+
color: var(--ow-color-primary) !important;
201201
border-bottom: 0 !important;
202202
font-weight: bold;
203203
}
204204
.ow-notification-elem.unread .ow-notification-meta {
205-
color: #fff;
205+
color: var(--ow-color-white);
206206
}
207207
.ow-notification-elem:not(.unread):hover,
208208
.ow-notification-elem:not(.unread):focus {
209-
background: #f4f7f6;
209+
background: var(--ow-color-login-bg);
210210
}
211211
.ow-notification-elem:not(.unread):hover .ow-notification-meta,
212212
.ow-notification-elem:not(.unread):focus .ow-notification-meta {
213-
color: #000;
213+
color: var(--ow-color-black);
214214
}
215215
.ow-notification-elem.unread:hover,
216216
.ow-notification-elem.unread:focus {
217-
background: #000;
217+
background: var(--ow-color-black);
218218
}
219219
.ow-no-notifications {
220-
color: #464646;
220+
color: var(--ow-color-fg-darker);
221221
text-align: center;
222222
font-weight: bold;
223223
font-size: small;
@@ -227,11 +227,11 @@
227227
.ow-notification-elem:focus,
228228
.ow-notification-elem a:focus,
229229
.ow-notification-dropdown .toggle-btn:focus {
230-
outline: 0.5px dotted rgba(0, 0, 0, 0.25);
230+
outline: 0.5px dotted var(--ow-overlay-25);
231231
}
232232
#ow-notification-dropdown-error-container {
233-
color: #c51b25;
234-
background-color: #ffd2d2;
233+
color: var(--ow-color-danger);
234+
background-color: var(--ow-color-primary-light);
235235
display: none;
236236
}
237237
#ow-notification-dropdown-error {
@@ -299,7 +299,7 @@
299299
background-image: url("../../openwisp-notifications/images/icons/icon-close.svg");
300300
}
301301
.ow-notification-inner {
302-
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
302+
border-bottom: 1px solid var(--ow-overlay-10);
303303
padding: 16px 22px;
304304
}
305305
.ow-notification-elem:last-child .ow-notification-inner {
@@ -308,15 +308,15 @@
308308

309309
/* Generic notification dialog */
310310
.ow-overlay-notification {
311-
background-color: rgba(0, 0, 0, 0.6);
311+
background-color: var(--ow-overlay-60);
312312
display: flex;
313313
justify-content: center;
314314
align-items: center;
315315
transition: opacity 0.3s;
316316
}
317317
.ow-dialog-notification {
318318
position: relative;
319-
background-color: white;
319+
background-color: var(--ow-color-white);
320320
padding: 20px;
321321
padding-top: 20px;
322322
border-radius: 10px;
@@ -350,14 +350,14 @@
350350
right: 10px;
351351
}
352352
.ow-dialog-close-x:hover {
353-
color: #df5d43;
353+
color: var(--ow-color-primary);
354354
}
355355
.ow-message-title {
356-
color: #333;
356+
color: var(--ow-color-fg-darker);
357357
margin-bottom: 10px;
358358
}
359359
.ow-message-title a {
360-
color: #df5d43;
360+
color: var(--ow-color-primary);
361361
}
362362
.ow-message-title a:hover {
363363
text-decoration: underline;

‎openwisp_notifications/static/openwisp-notifications/css/object-notifications.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
#ow-notification-help-text {
2525
padding: 10px 10px;
2626
margin: 0;
27-
color: #828282;
27+
color: var(--ow-color-fg-dark);
2828
background: rgba(255, 255, 255, 0.5);
2929
}
3030
#ow-object-notification-loader .loader {
@@ -48,7 +48,7 @@
4848
height: 14px;
4949
position: relative;
5050
bottom: -2px;
51-
background: #fff;
51+
background: var(--ow-color-white);
5252
-webkit-mask-size: 15px;
5353
-webkit-mask-repeat: no-repeat;
5454
mask-size: 15px;

0 commit comments

Comments
 (0)