Skip to content

Commit ec08547

Browse files
alekangelovalekangelov
committed
feat: add icon back into invert body button
1 parent a8c5907 commit ec08547

File tree

2 files changed

+39
-31
lines changed

2 files changed

+39
-31
lines changed

‎frontend/img/dark-mode.svg

+3
Loading

‎frontend/style.scss

+36-31
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,21 @@ select {
4646
}
4747

4848
@font-face {
49-
font-family: 'Inter';
49+
font-family: "Inter";
5050
font-weight: 100 900;
5151
font-display: swap;
5252
font-style: normal;
53-
font-named-instance: 'Regular';
54-
src: url('fonts/Inter-roman.var.woff2') format('woff2');
53+
font-named-instance: "Regular";
54+
src: url("fonts/Inter-roman.var.woff2") format("woff2");
5555
}
5656

5757
@font-face {
58-
font-family: 'Inter';
58+
font-family: "Inter";
5959
font-weight: 100 900;
6060
font-display: swap;
6161
font-style: italic;
62-
font-named-instance: 'Italic';
63-
src: url('fonts/Inter-italic.var.woff2') format('woff2');
62+
font-named-instance: "Italic";
63+
src: url("fonts/Inter-italic.var.woff2") format("woff2");
6464
}
6565

6666
$grey: #ccc;
@@ -102,7 +102,7 @@ header {
102102
h1 {
103103
line-height: 4rem;
104104
padding-left: 6.5rem;
105-
background: url('img/mailcrab.svg') no-repeat center left 1rem;
105+
background: url("img/mailcrab.svg") no-repeat center left 1rem;
106106
background-size: 5rem;
107107
font-weight: 300;
108108
font-size: 2.5rem;
@@ -128,20 +128,25 @@ header {
128128
font-size: 0.9rem;
129129
height: 2.5rem;
130130
line-height: 2rem;
131-
background: white url('img/trash.svg') no-repeat top 0.6rem left 0.75rem;
131+
background: white url("img/trash.svg") no-repeat top 0.6rem left 0.75rem;
132132
background-size: 14px;
133-
.no-trashcan {
134-
background: white;
133+
.invert-body {
134+
background: white url("img/dark-mode.svg") no-repeat top 0.6rem left
135+
0.75rem;
135136
padding: 0 1rem;
137+
@media (prefers-color-scheme: light) {
138+
display: none;
139+
}
136140
}
137141
@media (prefers-color-scheme: dark) {
138-
background: $surface-dark url('img/trash.svg') no-repeat top 0.6rem left
142+
background: $surface-dark url("img/trash.svg") no-repeat top 0.6rem left
139143
0.75rem;
140144
background-size: 14px;
141145
color: $foreground-dark;
142146
border: 1px solid $border-grey-dark;
143-
.no-trashcan {
144-
background: $surface-dark;
147+
.invert-body {
148+
background: $surface-dark url("img/dark-mode.svg") no-repeat top 0.6rem
149+
left 0.75rem;
145150
}
146151
}
147152

@@ -214,13 +219,13 @@ header {
214219
animation: slide-down 300ms ease-in;
215220
overflow: hidden;
216221
font-size: 0.9rem;
217-
background: $background url('img/envelope.svg') no-repeat center left
222+
background: $background url("img/envelope.svg") no-repeat center left
218223
0.75rem;
219224
background-size: 2rem;
220225
color: $foreground;
221226

222227
@media (prefers-color-scheme: dark) {
223-
background: $surface-dark url('img/envelope.svg') no-repeat center left
228+
background: $surface-dark url("img/envelope.svg") no-repeat center left
224229
0.75rem;
225230
background-size: 2rem;
226231
color: $foreground-dark;
@@ -245,13 +250,13 @@ header {
245250

246251
&.opened {
247252
opacity: 0.5;
248-
background-image: url('img/envelope-open.svg');
253+
background-image: url("img/envelope-open.svg");
249254
}
250255

251256
&.selected {
252257
color: $foreground !important;
253258
font-weight: 500;
254-
background-image: url('img/envelope-open-text.svg');
259+
background-image: url("img/envelope-open-text.svg");
255260

256261
@media (prefers-color-scheme: dark) {
257262
color: $foreground-dark !important;
@@ -275,11 +280,11 @@ header {
275280
}
276281

277282
&::before {
278-
content: '<';
283+
content: "<";
279284
}
280285

281286
&::after {
282-
content: '>';
287+
content: ">";
283288
}
284289
}
285290
}
@@ -329,20 +334,20 @@ header {
329334

330335
&.attachments {
331336
.subject::before {
332-
content: ' ';
337+
content: " ";
333338
display: inline-block;
334339
margin-right: 0.2rem;
335340
width: 0.9rem;
336341
height: 0.9rem;
337-
background: url('img/paperclip.svg') no-repeat center left;
342+
background: url("img/paperclip.svg") no-repeat center left;
338343
}
339344
}
340345
}
341346
}
342347

343348
.recipients {
344349
& > .email + .email:before {
345-
content: ', <';
350+
content: ", <";
346351
display: inline-block;
347352
color: rgba(black, 0.3);
348353

@@ -353,7 +358,7 @@ header {
353358

354359
.email {
355360
&::before {
356-
content: '<';
361+
content: "<";
357362
color: rgba(black, 0.3);
358363

359364
@media (prefers-color-scheme: dark) {
@@ -362,7 +367,7 @@ header {
362367
}
363368

364369
&::after {
365-
content: '>';
370+
content: ">";
366371
color: rgba(black, 0.3);
367372

368373
@media (prefers-color-scheme: dark) {
@@ -436,12 +441,12 @@ header {
436441
margin-right: 0;
437442
margin-bottom: 0.25rem;
438443
padding: 0.5rem 1.5rem 0.5rem 2rem;
439-
background: white url('img/trash.svg') no-repeat center left 1rem;
444+
background: white url("img/trash.svg") no-repeat center left 1rem;
440445
background-size: 12px;
441446
border: 1px solid $grey;
442447

443448
@media (prefers-color-scheme: dark) {
444-
background: $surface-dark url('img/trash.svg') no-repeat center
449+
background: $surface-dark url("img/trash.svg") no-repeat center
445450
left 1rem;
446451
background-size: 12px;
447452
color: $foreground-dark;
@@ -495,11 +500,11 @@ header {
495500
}
496501

497502
&::before {
498-
content: ' <';
503+
content: " <";
499504
}
500505

501506
&::after {
502-
content: '>';
507+
content: ">";
503508
}
504509
}
505510
}
@@ -514,19 +519,19 @@ header {
514519
text-decoration: none;
515520
color: black;
516521
transition: all 150ms ease-in;
517-
background: white url('img/file.svg') no-repeat center left 0.5rem;
522+
background: white url("img/file.svg") no-repeat center left 0.5rem;
518523
background-size: 1rem;
519524

520525
@media (prefers-color-scheme: dark) {
521-
background: $surface-dark url('img/file.svg') no-repeat center left
526+
background: $surface-dark url("img/file.svg") no-repeat center left
522527
0.5rem;
523528
background-size: 1rem;
524529
color: $foreground-dark;
525530
border: 1px solid $border-grey-dark;
526531
}
527532

528533
&.application-pdf {
529-
background-image: url('img/file-pdf.svg');
534+
background-image: url("img/file-pdf.svg");
530535
}
531536

532537
.size {

0 commit comments

Comments
 (0)