dark.scss 12.4 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
        border-bottom: none;
        background-color: $even-darker-grey;
      }
    }
126
127
128
129
130
131
132
133
    ul:nth-child(2) {
      #versionNumber {
        color: $lighter-grey!important;
      }
      #versionNumber:hover {
        color: $lighter-grey!important;
      }
    }
ransome1's avatar
ransome1 committed
134
  }
135
136
137
138
139
140
141
142
  #drawerContainer {
    .zoom {
      svg {
        color: white!important;
      }
      #zoomStatus {
        color: white!important;
      }
ransome1's avatar
ransome1 committed
143
144
    }
  }
145
146
  #todoTableSearchContainer {
    background-color: $almost-black;
ransome1's avatar
ransome1 committed
147
148
149
150
    input[type="search"]::-webkit-search-cancel-button {
      background-color: $almost-white;
    }
    #todoTableSearchAddTodo {
151
152
153
154
155
      background: $lighter-grey!important;
      color: $almost-black!important;
      i {
        color: inherit;
      }
ransome1's avatar
ransome1 committed
156
    }
ransome1's avatar
ransome1 committed
157
    #todoTableSearchAddTodo:hover,
ransome1's avatar
ransome1 committed
158
159
    #todoTableSearchAddTodo:focus,
    #todoTableSearchAddTodo:focus-visible {
ransome1's avatar
ransome1 committed
160
      color: $almost-black!important;
161
      background: white!important;
zerodat's avatar
zerodat committed
162
    }
163
164
    #btnToggleViewContainer {
      background: transparent!important;
165
166
    }
  }
167
168
169
  #resultStats {
    .tag {
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
170
171
172
      strong {
        color: white!important;
      }
ransome1's avatar
ransome1 committed
173
    }
174
175
176
177
  }
  #todoTable {
    .todo#previousItem.is-highlighted {
      background-color: $even-darker-grey;
ransome1's avatar
ransome1 committed
178
    }
179
180
    .todo:hover .cell,
    .todo.due {
ransome1's avatar
ransome1 committed
181
      button {
182
        color: $almost-white;
ransome1's avatar
ransome1 committed
183
184
      }
    }
185
186
    .group.due {
      color: $light-grey;
ransome1's avatar
ransome1 committed
187
      button {
ransome1's avatar
ransome1 committed
188
189
190
        color: inherit;
      }
    }
191
192
    .todo {
      border-color: $even-darker-grey;
ransome1's avatar
ransome1 committed
193
194
      .cell.checkbox {
        a {
195
          color: $has-text-link;
ransome1's avatar
ransome1 committed
196
197
198
199
200
201
202
203
          font-size: 1.25em;
        }
        a:focus-visible {
          color: white!important;
        }
        a:hover {
          color: white!important;
        }
ransome1's avatar
ransome1 committed
204
      }
205
206
207
208
209
210
211
212
      .cell.checkbox,
      .cell.archive {
        a:focus-visible {
          color: $lighter-grey!important;
        }
      }
      a.cell.text {
        color: $almost-white!important;
213
      }
214
      a.cell.text:focus-visible {
ransome1's avatar
ransome1 committed
215
216
        background: $darker-grey!important;
      }
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
243
244
245
246
247
248
249
250
      .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
251
      }
252
    }
ransome1's avatar
ransome1 committed
253
  }
254
255
256
257
258
259
  #modalForm {
    i {
      color: $lighter-grey!important;
    }
    .field {
      input,
260
      select {
261
262
263
264
265
266
        color: white!important;
      }
      select option {
        background: $even-darker-grey;
      }
    }
ransome1's avatar
ransome1 committed
267
268
269
270
271
272
273
274
275
276
    #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
277
  }
278
279
280
281
282
  #recurrencePicker {
    #recurrencePickerInput,
    .radio {
      cursor: pointer;
      background: none!important;
ransome1's avatar
ransome1 committed
283
284
      color: white!important;
    }
285
286
    .radio:hover {
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
287
    }
288
289
290
291
    #recurrencePickerContainer {
      background: $darker-grey;
      .card-footer {
        border-color: $almost-black;
292
      }
ransome1's avatar
ransome1 committed
293
294
    }
  }
295
296
297
298
299
300
  #drawerContainer {
    .drawer {
      background: $even-darker-grey!important;
      h4.is-4 {
        color: white;
      }
ransome1's avatar
ransome1 committed
301
302
303
304
305
      button {
        span.tag {
          color: $dark-grey;
        }
      }
ransome1's avatar
ransome1 committed
306
307
308
309
310
311
312
313
314
315
316
317
      #sortByContainer {
        li {
          background: $darker-grey;
          color: white;
          i {
            color: $light-grey;
          }
        }
        li.drag-sort-active {
          border-left: 0.2em solid white;
        }
      }
318
    }
ransome1's avatar
ransome1 committed
319
320
321
322
    .drawer::-webkit-scrollbar-thumb:window-inactive,
    .drawer::-webkit-scrollbar-thumb {
      background: $dark-grey;
    }
323
324
    #drawerClose {
      background: $even-darker-grey!important;
ransome1's avatar
ransome1 committed
325
326
    }
  }
327
328
329
330
331
  #todoTableWrapper {
    header {
      background-color: $almost-black;
    }
  }
ransome1's avatar
ransome1 committed
332
333
334
335
  #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
  #todoTableWrapper::-webkit-scrollbar-thumb {
    background: $even-darker-grey;
  }
ransome1's avatar
ransome1 committed
336
  #filterContext,
337
  #todoContext {
338
    box-shadow: 0 0 1em $darker-grey!important;
339
    a {
340
      color: $almost-white!important;
ransome1's avatar
ransome1 committed
341
342
    }
    a:hover {
343
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
344
      background: $darker-grey!important;
345
    }
ransome1's avatar
ransome1 committed
346
347
348
349
    .card {
      background: $even-darker-grey;
      #filterContextDelete {
        color: $has-text-danger!important;
350
351
      }
    }
ransome1's avatar
ransome1 committed
352
  }
353
354
355
356
357
358
359
360
361
  #fileTabBar {
    ul {
      background-color: $darker-grey;
      li {
        color: $mid-grey;
        i {
          color: $darker-grey;
        }
      }
362
363
      li:hover,
      li.is-highlighted:hover {
364
365
366
367
368
369
370
371
372
373
374
375
376
        i {
          color: $has-text-link;
        }
      }
      li.is-highlighted {
        background: $almost-black;
        color: white;
        i {
          color: $almost-black;
        }
      }
    }
  }
377
  .contexts {
ransome1's avatar
ransome1 committed
378
    button {
379
380
381
      color: $sleek-contexts-button;
      background: darken($sleek-contexts-button, 55%);
      span.tag {
ransome1's avatar
ransome1 committed
382
        color: darken($sleek-contexts-button, 65%)!important;
383
384
        background: lighten($sleek-contexts-button, 1%);
      }
ransome1's avatar
ransome1 committed
385
    }
ransome1's avatar
ransome1 committed
386
387
388
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-contexts-button, 65%)!important;
389
      color: white;
ransome1's avatar
ransome1 committed
390
    }
391
392
  }
  .projects {
ransome1's avatar
ransome1 committed
393
    button {
394
395
396
      color: $sleek-projects-button;
      background: darken($sleek-projects-button, 55%);
      span.tag {
ransome1's avatar
ransome1 committed
397
        color: darken($sleek-projects-button, 65%)!important;
398
399
        background: lighten($sleek-projects-button, 1%);
      }
ransome1's avatar
ransome1 committed
400
    }
ransome1's avatar
ransome1 committed
401
402
403
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-projects-button, 65%)!important;
404
      color: white;
ransome1's avatar
ransome1 committed
405
406
    }
  }
407
  .priority {
408
409
410
411
412
413
414
    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;
415
416
417
418
419
420
    }
  }
  .toggle {
    .switch {
      .slider {
        background-color: $dark-grey;
ransome1's avatar
ransome1 committed
421
      }
422
423
      input:checked + .slider {
        background-color: $darker-grey !important;
424
      }
425
426
427
428
429
      input:focus + .slider {
        box-shadow: none;
      }
      input:focus-visible {
        outline: 2px solid white!important;
ransome1's avatar
ransome1 committed
430
431
432
      }
    }
  }
ransome1's avatar
ransome1 committed
433
434
435
436
437

  .card {
    background: $even-darker-grey;
    color: $lighter-grey;
    .card-footer-item:hover {
438
      color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
439
440
441
442
443
444
445
446
447
448
449
450
    }
    .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;
451
    }
ransome1's avatar
ransome1 committed
452
  }
ransome1's avatar
ransome1 committed
453

454
  .modal.content {
ransome1's avatar
ransome1 committed
455
    color: $lighter-grey!important;
ransome1's avatar
ransome1 committed
456
    button,
ransome1's avatar
ransome1 committed
457
458
    button,
    select {
ransome1's avatar
ransome1 committed
459
460
      background: $darker-grey!important;
    }
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
    .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;
482
483
484
485
      .modal-card-body::-webkit-scrollbar-thumb:window-inactive,
      .modal-card-body::-webkit-scrollbar-thumb {
        background: $darker-grey;
      }
486
487
488
489
490
491
492
493
494
495
496
497
498
499
    }
    .title,
    table th {
      color: white;
    }
    table tr,
    table th,
    table td {
      border-color: $darker-grey!important;
    }
    .tabs ul {
      border-color: transparent;
    }
    .tabs li a {
500
501
      color: white!important;
      border-color: $dark-grey!important;
502
503
    }
    .tabs li.is-active a {
504
505
      color: $has-text-link!important;
      border-color: $has-text-link!important;
506
    }
ransome1's avatar
ransome1 committed
507
  }
508
  .message.fixed {
ransome1's avatar
ransome1 committed
509
    background: transparent!important;
510
511
512
513
514
515
    i {
      color: white!important;
    }
    .message-body {
      color: $lighter-grey;
      background: $even-darker-grey!important;
ransome1's avatar
ransome1 committed
516
      button {
517
518
519
        background: $darker-grey!important;
      }
    }
ransome1's avatar
ransome1 committed
520
  }
521
522
523
524
525
  .dueDate {
    #datePickerInput,
    #datePickerInput::placeholder {
      cursor: pointer;
    }
ransome1's avatar
ransome1 committed
526
  }
527
528
  .datepicker {
    background: transparent;
ransome1's avatar
ransome1 committed
529
    button {
530
      background: transparent!important;
ransome1's avatar
ransome1 committed
531
    }
532
533
534
    .datepicker-picker {
      background: $darker-grey;
      color: white;
ransome1's avatar
ransome1 committed
535
536
537
      button,
      button:hover,
      .datepicker-header .datepicker-controls button:hover {
538
539
540
        background: none;
        color: inherit;
      }
ransome1's avatar
ransome1 committed
541
      .datepicker-footer .datepicker-controls button {
542
543
        color: inherit;
      }
544
545
546
547
548
549
550
551
552
      .datepicker-cell {
        border-color: $darker-grey;
        background: $darker-grey;
      }
      .datepicker-cell.today,
      .datepicker-cell.today.selected {
        color: $darker-grey!important;
        background: $mid-grey!important;
      }
553
      .datepicker-cell.selected,
554
555
556
557
558
559
560
561
      .datepicker-cell.selected:hover,
      .datepicker-cell.selected.focused, {
        color: white!important;
        background: $has-text-link!important;
      }
      .datepicker-cell:hover,
      .datepicker-cell.focused {
        border-color: $has-text-link;
562
      }
ransome1's avatar
ransome1 committed
563
564
    }
  }
565
566
567
568
569
570
571
572
  .contentContainer {
    .title.is-1 {
      color: white;
    }
    .subtitle,
    .subtitle strong {
      color: $lighter-grey;
    }
ransome1's avatar
ransome1 committed
573
574
575
    .btnOnboarding:focus-visible {
      color: $lighter-grey;
    }
ransome1's avatar
ransome1 committed
576
577
  }
}