dark.scss 11.7 KB
Newer Older
ransome1's avatar
ransome1 committed
1
2
@charset "utf-8";
@import "variables.scss";
3
body.dark {
ransome1's avatar
ransome1 committed
4
  background-color: $almost-black;
5
  color: $almost-white;
6
7
  code, pre {
    background-color: $almost-black!important;
8
  }
9
  a:hover,
10
11
12
  a:focus-visible {
    color: $has-text-link;
  }
13
  strong {
14
    color: $almost-white;
15
16
  }
  input,
ransome1's avatar
ransome1 committed
17
  select {
18
    border: none!important;
ransome1's avatar
ransome1 committed
19
    background: transparent!important;
20
21
    color: white!important;
  }
ransome1's avatar
ransome1 committed
22
  input[type="text"],
ransome1's avatar
ransome1 committed
23
  input[type="search"],
ransome1's avatar
ransome1 committed
24
25
26
27
  textarea {
    background: $darker-grey!important;
    border: none;
    color: white;
28
29
  }
  input:focus,
ransome1's avatar
ransome1 committed
30
31
  select:focus {
    background-color: $darker-grey!important;
32
  }
ransome1's avatar
ransome1 committed
33
34
35
  .is-focused .inputWrapper,
  .inputWrapper.is-focused {
    label,
36
37
38
    i.fa-search,
    .todoTableSearchQuestionmark i {
      color: $almost-white!important;
ransome1's avatar
ransome1 committed
39
40
    }
  }
41
42
43
44
45
46
47
48
49
50
51
  input::placeholder {
    color: $dark-grey!important;
  }
  input[type="checkbox"]:focus,
  input[type="checkbox"]:active {
    outline: none;
    box-shadow: none!important;
  }
  input[type="range"] {
    background: $dark-grey!important;
  }
ransome1's avatar
ransome1 committed
52
53
54
  input[type="range"]::-webkit-slider-thumb {
    background: $almost-white;
  }
55
  button {
ransome1's avatar
ransome1 committed
56
    color: $almost-white;
57
    background: $almost-black;
58
    i {
59
      color: $almost-white;
60
61
    }
  }
62
  ::after {
63
    border-color: $almost-white!important;
64
  }
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  table {
    width: 100%;
    background-color: transparent!important;
    color: $lighter-grey!important;
  }
  table tr td {
    border-color: $almost-black!important;
  }
  table tr th {
    color: white!important;
  }
  table.files {
    tr {
      td:last-child {
79
80
81
        a,
        a:hover {
          color: $almost-white!important;
82
        }
ransome1's avatar
ransome1 committed
83
84
85
        a:focus-visible {
          color: $almost-black!important;
        }
86
      }
ransome1's avatar
ransome1 committed
87
    }
ransome1's avatar
ransome1 committed
88
89
90
91
    button {
      color: $almost-white;
      background: $almost-black;
    }
92
93
94
95
    button:focus-visible {
      color: $almost-black!important;
      background: $almost-white!important;
    }
ransome1's avatar
ransome1 committed
96
97
98
    button:disabled {
      opacity: 0.5;
    }
99
100
101
102
103
104
105
106
  }
  nav {
    background-color: $darker-grey;
    svg {
      color: $lighter-grey;
    }
    ul {
      li.logo {
107
        color: $almost-white!important;
108
109
        background: none;
      }
ransome1's avatar
ransome1 committed
110
      li a {
111
        color: $almost-white!important;
ransome1's avatar
ransome1 committed
112
113
        border-bottom: 1px solid $even-darker-grey;
      }
ransome1's avatar
ransome1 committed
114
115
      li a:hover,
      li a:focus {
116
        color: $lighter-grey!important;
117
118
119
        border-bottom: none;
        background-color: $even-darker-grey;
      }
ransome1's avatar
ransome1 committed
120
      li a.is-highlighted {
121
        color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
122
123
124
125
126
        border-bottom: none;
        background-color: $even-darker-grey;
      }
    }
  }
127
128
129
130
131
132
133
134
  #drawerContainer {
    .zoom {
      svg {
        color: white!important;
      }
      #zoomStatus {
        color: white!important;
      }
ransome1's avatar
ransome1 committed
135
136
    }
  }
137
138
  #todoTableSearchContainer {
    background-color: $almost-black;
ransome1's avatar
ransome1 committed
139
140
141
142
    input[type="search"]::-webkit-search-cancel-button {
      background-color: $almost-white;
    }
    #todoTableSearchAddTodo {
143
144
145
146
147
      background: $lighter-grey!important;
      color: $almost-black!important;
      i {
        color: inherit;
      }
ransome1's avatar
ransome1 committed
148
    }
ransome1's avatar
ransome1 committed
149
    #todoTableSearchAddTodo:hover,
ransome1's avatar
ransome1 committed
150
151
    #todoTableSearchAddTodo:focus,
    #todoTableSearchAddTodo:focus-visible {
ransome1's avatar
ransome1 committed
152
      color: $almost-black!important;
153
      background: white!important;
zerodat's avatar
zerodat committed
154
    }
155
156
    #btnToggleViewContainer {
      background: transparent!important;
157
158
    }
  }
159
160
161
  #resultStats {
    .tag {
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
162
163
164
      strong {
        color: white!important;
      }
ransome1's avatar
ransome1 committed
165
    }
166
167
168
169
  }
  #todoTable {
    .todo#previousItem.is-highlighted {
      background-color: $even-darker-grey;
ransome1's avatar
ransome1 committed
170
    }
171
172
    .todo:hover .cell,
    .todo.due {
ransome1's avatar
ransome1 committed
173
      button {
174
        color: $almost-white;
ransome1's avatar
ransome1 committed
175
176
      }
    }
177
178
    .group.due {
      color: $light-grey;
ransome1's avatar
ransome1 committed
179
      button {
ransome1's avatar
ransome1 committed
180
181
182
        color: inherit;
      }
    }
183
184
    .todo {
      border-color: $even-darker-grey;
ransome1's avatar
ransome1 committed
185
186
      .cell.checkbox {
        a {
187
          color: $has-text-link;
ransome1's avatar
ransome1 committed
188
189
190
191
192
193
194
195
          font-size: 1.25em;
        }
        a:focus-visible {
          color: white!important;
        }
        a:hover {
          color: white!important;
        }
ransome1's avatar
ransome1 committed
196
      }
197
198
199
200
201
202
203
204
      .cell.checkbox,
      .cell.archive {
        a:focus-visible {
          color: $lighter-grey!important;
        }
      }
      a.cell.text {
        color: $almost-white!important;
205
      }
206
      a.cell.text:focus-visible {
ransome1's avatar
ransome1 committed
207
208
        background: $darker-grey!important;
      }
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
      .cell.itemDueDate {
        color: white;
        i {
          color: inherit;
        }
        i.fa-sort-down {
          color: $dark-grey;
        }
      }
      .cell.itemDueDate.isToday,
      .cell.itemDueDate.isPast {
        color: $has-text-danger;
        i {
          color: inherit;
        }
      }
      .cell.itemDueDate.isTomorrow {
        i {
          color: $has-text-attention!important;
        }
      }
      .cell {
        span.contexts {
          color: $sleek-contexts-button!important;
          background: darken($sleek-contexts-button, 60%)!important;
        }
        span.projects {
          color: $sleek-projects-button!important;
          background: darken($sleek-projects-button, 60%)!important;
        }
        .is-white {
          color: $lighter-grey;
          background: none;
        }
ransome1's avatar
ransome1 committed
243
      }
244
    }
ransome1's avatar
ransome1 committed
245
  }
246
247
248
249
250
251
  #modalForm {
    i {
      color: $lighter-grey!important;
    }
    .field {
      input,
252
      select {
253
254
255
256
257
258
        color: white!important;
      }
      select option {
        background: $even-darker-grey;
      }
    }
ransome1's avatar
ransome1 committed
259
260
261
262
263
264
265
266
267
268
    #autoCompleteContainer {
      background: $darker-grey;
      h4 {
        color: white;
      }
      section::-webkit-scrollbar-thumb:window-inactive,
      section::-webkit-scrollbar-thumb {
        background: $dark-grey;
      }
    }
ransome1's avatar
ransome1 committed
269
  }
270
271
272
273
274
  #recurrencePicker {
    #recurrencePickerInput,
    .radio {
      cursor: pointer;
      background: none!important;
ransome1's avatar
ransome1 committed
275
276
      color: white!important;
    }
277
278
    .radio:hover {
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
279
    }
280
281
282
283
    #recurrencePickerContainer {
      background: $darker-grey;
      .card-footer {
        border-color: $almost-black;
284
      }
ransome1's avatar
ransome1 committed
285
286
    }
  }
287
288
289
290
291
292
  #drawerContainer {
    .drawer {
      background: $even-darker-grey!important;
      h4.is-4 {
        color: white;
      }
ransome1's avatar
ransome1 committed
293
294
295
296
297
      button {
        span.tag {
          color: $dark-grey;
        }
      }
ransome1's avatar
ransome1 committed
298
299
300
301
302
303
304
305
306
307
308
309
      #sortByContainer {
        li {
          background: $darker-grey;
          color: white;
          i {
            color: $light-grey;
          }
        }
        li.drag-sort-active {
          border-left: 0.2em solid white;
        }
      }
310
    }
ransome1's avatar
ransome1 committed
311
312
313
314
    .drawer::-webkit-scrollbar-thumb:window-inactive,
    .drawer::-webkit-scrollbar-thumb {
      background: $dark-grey;
    }
315
316
    #drawerClose {
      background: $even-darker-grey!important;
ransome1's avatar
ransome1 committed
317
318
    }
  }
ransome1's avatar
ransome1 committed
319
320
321
322
  #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
  #todoTableWrapper::-webkit-scrollbar-thumb {
    background: $even-darker-grey;
  }
ransome1's avatar
ransome1 committed
323
  #filterContext,
324
  #todoContext {
325
    box-shadow: 0 0 1em $darker-grey!important;
326
    a {
327
      color: $almost-white!important;
ransome1's avatar
ransome1 committed
328
329
    }
    a:hover {
330
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
331
      background: $darker-grey!important;
332
    }
ransome1's avatar
ransome1 committed
333
334
335
336
    .card {
      background: $even-darker-grey;
      #filterContextDelete {
        color: $has-text-danger!important;
337
338
      }
    }
ransome1's avatar
ransome1 committed
339
  }
340
  .contexts {
ransome1's avatar
ransome1 committed
341
    button {
342
343
344
      color: $sleek-contexts-button;
      background: darken($sleek-contexts-button, 55%);
      span.tag {
ransome1's avatar
ransome1 committed
345
        color: darken($sleek-contexts-button, 65%)!important;
346
347
        background: lighten($sleek-contexts-button, 1%);
      }
ransome1's avatar
ransome1 committed
348
    }
ransome1's avatar
ransome1 committed
349
350
351
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-contexts-button, 65%)!important;
352
      color: white;
ransome1's avatar
ransome1 committed
353
    }
354
355
  }
  .projects {
ransome1's avatar
ransome1 committed
356
    button {
357
358
359
      color: $sleek-projects-button;
      background: darken($sleek-projects-button, 55%);
      span.tag {
ransome1's avatar
ransome1 committed
360
        color: darken($sleek-projects-button, 65%)!important;
361
362
        background: lighten($sleek-projects-button, 1%);
      }
ransome1's avatar
ransome1 committed
363
    }
ransome1's avatar
ransome1 committed
364
365
366
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-projects-button, 65%)!important;
367
      color: white;
ransome1's avatar
ransome1 committed
368
369
    }
  }
370
  .priority {
371
372
373
374
375
376
377
    button:not(.A):not(.B):not(.C) {
      color: white;
      background: $mid-grey;
    }
    button.is-dark:not(.A):not(.B):not(.C) {
      color: white;
      background: darken($mid-grey, 10%)!important;
378
379
380
381
382
383
    }
  }
  .toggle {
    .switch {
      .slider {
        background-color: $dark-grey;
ransome1's avatar
ransome1 committed
384
      }
385
386
      input:checked + .slider {
        background-color: $darker-grey !important;
387
      }
388
389
390
391
392
      input:focus + .slider {
        box-shadow: none;
      }
      input:focus-visible {
        outline: 2px solid white!important;
ransome1's avatar
ransome1 committed
393
394
395
      }
    }
  }
ransome1's avatar
ransome1 committed
396
397
398
399
400

  .card {
    background: $even-darker-grey;
    color: $lighter-grey;
    .card-footer-item:hover {
401
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
402
403
404
405
406
407
408
409
410
411
412
413
    }
    .card-footer-item:focus-visible {
      color: $almost-white!important;
      background: $darker-grey!important;
    }
    .card-footer {
      border-color: $darker-grey!important;
    }
    .card-footer-item {
      border-color: $darker-grey!important;
      background: transparent;
      color: $almost-white!important;
414
    }
ransome1's avatar
ransome1 committed
415
  }
ransome1's avatar
ransome1 committed
416

417
  .modal.content {
ransome1's avatar
ransome1 committed
418
    color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
419
    button,
ransome1's avatar
ransome1 committed
420
421
    button,
    select {
ransome1's avatar
ransome1 committed
422
423
      background: $darker-grey!important;
    }
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
    .select:not(.is-multiple):not(.is-loading)::after {
      border-color: white!important;
    }
    .delete,
    .modal-close,
    .tag.is-info {
      background: white!important;
      color: $even-darker-grey!important;
    }
    .tag:not(body).is-dark {
      background: $almost-black!important;
    }
    .modal-close::before,
    .modal-close::after {
      color: $even-darker-grey!important;
      background: $even-darker-grey!important;
    }
    .modal-card,
    table {
      background: $even-darker-grey;
      color: $lighter-grey!important;
445
446
447
448
      .modal-card-body::-webkit-scrollbar-thumb:window-inactive,
      .modal-card-body::-webkit-scrollbar-thumb {
        background: $darker-grey;
      }
449
450
451
452
453
454
455
456
457
458
459
460
461
462
    }
    .title,
    table th {
      color: white;
    }
    table tr,
    table th,
    table td {
      border-color: $darker-grey!important;
    }
    .tabs ul {
      border-color: transparent;
    }
    .tabs li a {
463
464
      color: white!important;
      border-color: $dark-grey!important;
465
466
    }
    .tabs li.is-active a {
467
468
      color: $has-text-link!important;
      border-color: $has-text-link!important;
469
    }
ransome1's avatar
ransome1 committed
470
  }
471
  .message.fixed {
ransome1's avatar
ransome1 committed
472
    background: transparent!important;
473
474
475
476
477
478
    i {
      color: white!important;
    }
    .message-body {
      color: $lighter-grey;
      background: $even-darker-grey!important;
ransome1's avatar
ransome1 committed
479
      button {
480
481
482
        background: $darker-grey!important;
      }
    }
ransome1's avatar
ransome1 committed
483
  }
484
485
486
487
488
  .dueDate {
    #datePickerInput,
    #datePickerInput::placeholder {
      cursor: pointer;
    }
ransome1's avatar
ransome1 committed
489
  }
490
491
  .datepicker {
    background: transparent;
ransome1's avatar
ransome1 committed
492
    button {
493
      background: transparent!important;
ransome1's avatar
ransome1 committed
494
    }
495
496
497
    .datepicker-cell.today.focused:not(.selected),
    .datepicker-cell.today:not(.selected) {
      background: $almost-black!important;
ransome1's avatar
ransome1 committed
498
    }
499
500
501
    .datepicker-cell.today.focused:not(.selected),
    .datepicker-cell.today:hover {
      color: white!important;
ransome1's avatar
ransome1 committed
502
    }
503
504
505
    .datepicker-picker {
      background: $darker-grey;
      color: white;
ransome1's avatar
ransome1 committed
506
507
508
      button,
      button:hover,
      .datepicker-header .datepicker-controls button:hover {
509
510
511
        background: none;
        color: inherit;
      }
ransome1's avatar
ransome1 committed
512
      .datepicker-footer .datepicker-controls button {
513
514
515
516
517
518
519
520
521
522
523
524
        color: inherit;
      }
      .datepicker-cell.selected,
      .datepicker-cell.selected:hover {
        color: $darker-grey;
        background: white;
      }
      .datepicker-cell.focused:not(.selected),
      .datepicker-cell:hover {
        color: $darker-grey;
        background: $lighter-grey;
      }
ransome1's avatar
ransome1 committed
525
526
    }
  }
527
528
529
530
531
532
533
534
  .contentContainer {
    .title.is-1 {
      color: white;
    }
    .subtitle,
    .subtitle strong {
      color: $lighter-grey;
    }
ransome1's avatar
ransome1 committed
535
536
537
    .btnOnboarding:focus-visible {
      color: $lighter-grey;
    }
ransome1's avatar
ransome1 committed
538
539
  }
}