style.scss 23 KB
Newer Older
1
2
@charset 'utf-8';
@import 'variables.scss';
ransome1's avatar
ransome1 committed
3
@import 'dark.scss';
ransome1's avatar
ransome1 committed
4
@font-face {
5
6
7
  font-family: 'FreeSans';
  src: url('../fonts/FreeSans.otf') format('opentype');
  src: url('../fonts/FreeSans.ttf') format('truetype');
ransome1's avatar
ransome1 committed
8
9
}
@font-face {
10
11
12
  font-family: 'FreeSansBold';
  src: url('../fonts/FreeSansBold.otf') format('opentype');
  src: url('../fonts/FreeSansBold.ttf') format('truetype');
ransome1's avatar
ransome1 committed
13
14
15
16
17
}
html {
  height: 100%;
}
body {
18
  font-size: 16px;
ransome1's avatar
ransome1 committed
19
20
21
22
23
24
25
  height: 100%;
  margin: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
button, button:focus, button:active, button:active, button:after, button::before, button:active:after, .button, .button-is-white {
26
27
  border: none !important;
  box-shadow: none !important;
ransome1's avatar
ransome1 committed
28
}
ransome1's avatar
ransome1 committed
29
30
31
.button i {
  color: $has-text-link;
}
ransome1's avatar
ransome1 committed
32
.is-hidden {
33
  display: none !important;
ransome1's avatar
ransome1 committed
34
35
36
}
.button.is-outlined {
  background: transparent;
37
  border: 1px solid $mid-grey !important;
ransome1's avatar
ransome1 committed
38
39
40
  color: $dark-grey;
}
.button.is-outlined:hover {
41
  border: 1px solid $mid-grey !important;
ransome1's avatar
ransome1 committed
42
43
  color: $dark-grey;
}
ransome1's avatar
ransome1 committed
44
.button.is-link i {
ransome1's avatar
ransome1 committed
45
46
  color: white;
}
ransome1's avatar
ransome1 committed
47
48
49
50
51
52
.button.is-greyed-out {
  cursor: not-allowed;
}
.is-greyed-out {
  filter: opacity(75%) grayscale(100%);
}
ransome1's avatar
ransome1 committed
53
54
table {
  width: 100%;
ransome1's avatar
ransome1 committed
55
  border-collapse: separate;
ransome1's avatar
ransome1 committed
56
57
  tr {
    th {
58
      padding: .1em 0 !important;
ransome1's avatar
ransome1 committed
59
      font-size: 1.2em;
60
      font-family: 'FreeSansBold';
ransome1's avatar
ransome1 committed
61
62
63
    }
    td {
      border: none;
64
      padding: .5em 2em .5em 0 !important;
ransome1's avatar
ransome1 committed
65
66
67
68
69
70
71
72
73
74
75
76
77
78
    }
  }
}
table.files {
  margin: 0;
  tr {
    td {
      vertical-align: middle;
    }
    td:first-child {
      width: 3em;
    }
    td:last-child {
      cursor: pointer;
79
80
81
      i {
        color: $has-text-link;
      }
ransome1's avatar
ransome1 committed
82
83
84
85
86
87
88
89
90
91
92
93
94
    }
  }
}
body::-webkit-scrollbar {
  display: none;
}
:focus,
:focus-visible {
  outline: none;
  box-shadow: none;
}
button:focus-visible,
a:focus-visible {
95
  outline: 2px solid $has-text-link !important;
ransome1's avatar
ransome1 committed
96
}
97
input[type='search']::-webkit-search-cancel-button {
ransome1's avatar
ransome1 committed
98
99
100
101
102
  -webkit-appearance: none;
  height: 1.15em;
  width: 1.15em;
  border-radius: 30em;
  background-color: $dark-grey;
ransome1's avatar
ransome1 committed
103
104
  -webkit-mask-image: url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg");
  mask-image: url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg");
ransome1's avatar
ransome1 committed
105
106
107
108
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
109
input[type='search']:focus::-webkit-search-cancel-button {
ransome1's avatar
ransome1 committed
110
111
112
113
114
115
  opacity: .8;
  pointer-events: all;
}
input:focus,
select:focus,
input.is-focused,
116
input[type='search']:focus,
ransome1's avatar
ransome1 committed
117
118
textarea:focus,
textarea.is-focused,
119
textarea[type='search']:focus {
ransome1's avatar
ransome1 committed
120
  border: none;
121
  box-shadow: 0 0 0 2px $has-text-link !important;
ransome1's avatar
ransome1 committed
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
  outline: none;
}
input,
input::placeholder,
select {
  width: auto;
  font-size: 1em;
  color: $has-text-link;
  box-shadow: none;
  background: transparent;
}
input[type=number] {
  text-align: center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
140
input[type='checkbox']:focus {
ransome1's avatar
ransome1 committed
141
  outline: none;
142
  box-shadow: none !important;
ransome1's avatar
ransome1 committed
143
}
144
input[type='range'] {
145
146
147
148
149
150
  -webkit-appearance: none;
  height: .25em;
  background: $dark-grey;
  border-radius: 10px;
  outline: none;
}
ransome1's avatar
ransome1 committed
151
152
.title,
strong {
153
154
  font-family: 'FreeSansBold';
  font-weight: normal !important;
ransome1's avatar
ransome1 committed
155
}
156
code, pre {
157
158
159
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
  background-color: $light-grey !important;
  color: inherit !important;
ransome1's avatar
ransome1 committed
160
161
162
163
164
165
166
167
168
169
170
171
}
nav {
  width: auto;
  height: 100%;
  float: left;
  position: relative;
  background: $almost-white;
  ul {
    float: left;
  	list-style-type: none;
  	margin: 0;
  	padding: 0;
ransome1's avatar
ransome1 committed
172
    li {
ransome1's avatar
ransome1 committed
173
174
175
176
177
178
179
180
181
      width: 5em;
      height: 5em;
      display: block;
      color: $dark-grey;
    	cursor: pointer;
    	line-height: 5em;
    	text-align: center;
    	border-bottom: 1px solid rgba(0,0,0,0.05);
    }
ransome1's avatar
ransome1 committed
182
    li:focus {
ransome1's avatar
ransome1 committed
183
184
185
186
187
188
189
      background: $light-grey;
      outline-style: none;
    }
    li:hover,
    li.is-highlighted {
      background: $light-grey;
    }
ransome1's avatar
ransome1 committed
190
    li#navBtnFilter.is-hidden {
ransome1's avatar
ransome1 committed
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
      display: none;
    }
    li.logo {
      background: $dark-grey;
      color: white;
      font-family: FreeSansBold;
      cursor: default;
    }
    li span.alert {
      position: absolute;
      top: 13%;
      right: 35%;
    }
  }
  ul:nth-child(2) {
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
ransome1's avatar
ransome1 committed
212
.contentContainer {
ransome1's avatar
ransome1 committed
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
243
244
245
246
247
248
  height: 80%;
}
#recurrencePicker {
  position: relative;
  #recurrencePickerInput {
    cursor: pointer;
  }
  .card {
    width: auto;
    display: none;
    position: fixed;
    .content {
      margin: 0;
      padding: 1em;
      display: flex;
      align-items: center;
      div {
        width: auto;
        float: left;
        text-align: center;
        padding: 0 .5em;
      }
      div.options {
        text-align: left;
      }
      #recurrencePickerDecrease,
      #recurrencePickerIncrease,
      #recurrencePickerSpinner {
        font-size: 1.25em;
        padding: .5em;
      }
      #recurrencePickerSpinner {
        width: 2em;
      }
    }
    label {
249
      display: block;
ransome1's avatar
ransome1 committed
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
      padding: 0;
      margin: .25em 0;
    }
  }
  .card.is-active {
    display: block;
  }
}
#recurrencePicker.is-active {
  display: block;
}
#errorContainer {
  display: none;
  p {
    margin: .1em 0;
  }
266
267
268
  i {
    color: white!important;
  }
ransome1's avatar
ransome1 committed
269
  .button {
ransome1's avatar
ransome1 committed
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
    color: white;
  }
}
#errorContainer.is-active {
  display: block;
}
#drawerContainer {
  width: var(--resizeable-width);
  min-width: var(--min-width);
  max-width: var(--max-width);
  --resizeable-width: 34em;
  height: 100%;
  float: left;
  display: none;
  /* HANDLE FOR DRAGGING */
  /* https://spin.atomicobject.com/2019/11/21/creating-a-resizable-html-element/ */
  #handle {
    position: absolute;
288
    right: -1em;
ransome1's avatar
ransome1 committed
289
290
291
292
293
294
295
    top: 0;
    height: 100%;
    width: 1em;
    background-color: transparent;
    z-index: 1;
  }
  #handle::after {
296
    content: '';
ransome1's avatar
ransome1 committed
297
298
299
300
301
302
303
304
    width: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: transparent;
    cursor: ew-resize;
    z-index: 2;
  }
305
  #drawerClose {
ransome1's avatar
ransome1 committed
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
    width: 2.5em;
    height: 2.5em;
    display: none;
    line-height: 2.5em;
    text-align: center;
    font-size: 1.25em;
    position: absolute;
    right: -0.75em;
    top: 50% - 2.5%;
    z-index: 30;
    background: $light-grey;
    border-radius: 50%;
    cursor: pointer;
  }
  .drawer {
    width: 100%;
    height: 100%;
    float: left;
324
    display: none !important;
ransome1's avatar
ransome1 committed
325
326
327
328
329
330
331
332
333
334
335
336
337
338
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2em;
    background: $light-grey;
    .button {
      margin: 0 .5rem .5rem 0;
      span.tag {
        font-family: FreeSansBold;
        position: absolute;
        right: -.75em;
        top: -.75em;
        z-index: 35;
      }
    }
ransome1's avatar
ransome1 committed
339
340
341
342
343
    .button.is-greyed-out {
      .tag {
        display: none;
      }
    }
ransome1's avatar
ransome1 committed
344
    h4.is-4 {
345
      font-size: 1.25em;
ransome1's avatar
ransome1 committed
346
347
      font-family: FreeSansBold;
      margin-bottom: 1.5em;
348
349
    }
    h4.is-4.clickable {
ransome1's avatar
ransome1 committed
350
      cursor: pointer;
ransome1's avatar
ransome1 committed
351
352
353
      i {
        color: $has-text-link;
      }
ransome1's avatar
ransome1 committed
354
    }
355
    section {
ransome1's avatar
ransome1 committed
356
357
358
359
      width: 100%;
      padding: 0;
      margin: 0 0 1.5em 0;
    }
ransome1's avatar
ransome1 committed
360
361
362
    table {
      margin-bottom: 2em;
    }
ransome1's avatar
ransome1 committed
363
364
365
366
367
    table tr td:nth-child(odd) {
      width: auto;
      vertical-align: middle;
    }
    table tr td:nth-child(even) {
368
      width: auto;
ransome1's avatar
ransome1 committed
369
      text-align: center;
370
      padding-right: 0 !important;
ransome1's avatar
ransome1 committed
371
372
373
    }
  }
  .drawer.is-active {
374
    display: block !important;
ransome1's avatar
ransome1 committed
375
  }
ransome1's avatar
ransome1 committed
376
377
378
379
  #viewDrawer {
    .button {
      margin: 0;
    }
380
381
382
383
384
385
386
    table {
      tr {
        th h3 {
          margin-top: 1em;
        }
      }
    }
ransome1's avatar
ransome1 committed
387
  }
ransome1's avatar
ransome1 committed
388
389
}
#drawerContainer:hover {
390
  #drawerClose {
ransome1's avatar
ransome1 committed
391
392
393
394
395
396
397
398
399
400
401
402
    display: inline-block;
  }
}
#drawerContainer.is-active {
  display: block;
}
#zoomStatus {
  padding: 0 .55em;
}
#zoomUndo {
  cursor: pointer;
}
ransome1's avatar
ransome1 committed
403
#datePickerInput {
ransome1's avatar
ransome1 committed
404
405
406
407
408
409
410
411
412
413
414
415
416
417
  cursor: pointer;
}
#todoTableSearchContainer {
  width: 100%;
  display: none;
  padding: 0 1.5em;
  background: white;
  position: sticky;
  top: 0;
  z-index: 45;
  .icon.is-left {
    top: .65em;
    left: .65em;
  }
418
419
420
421
  .icon.is-left i,
  .icon.is-right i {
    color: $mid-grey;
  }
ransome1's avatar
ransome1 committed
422
423
424
425
426
427
}
#todoTableSearchContainer.is-active {
  display: block;
}
#todoTable {
  width: 100%;
ransome1's avatar
ransome1 committed
428
  min-width: 30em;
ransome1's avatar
ransome1 committed
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
  float: left;
  display: none;
  padding: 0 2.5em 1.5em 2.5em;
  #resultStats {
    width: 100%;
    display: none;
    text-align: center;
    padding: 0;
    white-space: nowrap;
  }
  #resultStats.is-active {
    display: block;
  }
  #todoTableContainer {
    width: 100%;
    float: left;
  }
446
  .todo {
ransome1's avatar
ransome1 committed
447
448
449
450
451
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border-bottom: solid 1px $light-grey;
  }
452
  .todo:last-child {
ransome1's avatar
ransome1 committed
453
454
    border: none;
  }
455
  .todo#previousItem {
ransome1's avatar
ransome1 committed
456
457
458
459
460
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
  }
461
  .todo#previousItem.is-highlighted {
ransome1's avatar
ransome1 committed
462
463
    background-color: $almost-white;
  }
464
465
  .group {
    min-height: 1em;
ransome1's avatar
ransome1 committed
466
467
468
469
470
471
472
473
474
475
476
    margin-top: .5em;
    border: none;
    font-family: FreeSansBold;
    .button {
      cursor: default;
      height: auto;
      line-height: auto;
      font-size: 1.2em;
      padding: 0 .4em;
    }
  }
477
  .group.due {
ransome1's avatar
ransome1 committed
478
479
480
481
482
    .button {
      padding: 0;
      background: transparent;
    }
  }
483
  .todo {
ransome1's avatar
ransome1 committed
484
    display: flex;
485
486
  }
    .cell {
ransome1's avatar
ransome1 committed
487
      line-height: 1.7em;
ransome1's avatar
ransome1 committed
488
489
490
      padding: .75em 0;
      margin-right: 1em;
      height: auto;
ransome1's avatar
ransome1 committed
491
      cursor: pointer;
ransome1's avatar
ransome1 committed
492
493
494
495
      .is-white {
        background: none;
      }
      span.tag {
ransome1's avatar
ransome1 committed
496
        margin: 0 0.25em 0 0;
ransome1's avatar
ransome1 committed
497
498
499
500
501
502
503
504
      }
      span.tag.projects {
        background: $sleek-projects-button;
      }
      span.tag.contexts {
        background: $sleek-contexts-button;
      }
    }
505
    .cell.checkbox a {
ransome1's avatar
ransome1 committed
506
507
508
      flex: 0 0 1em;
      font-size: 1.25em;
    }
509
    .cell.text {
ransome1's avatar
ransome1 committed
510
      width: auto;
511
      flex: 1;
ransome1's avatar
ransome1 committed
512
      color: $dark-grey;
513
      margin-right: 0;
514
515
516
      .categories {
        margin-right: .5em;
      }
ransome1's avatar
ransome1 committed
517
      .button {
518
        font-size: 1.1em;
ransome1's avatar
ransome1 committed
519
520
        font-family: FreeSansBold;
        height: auto;
521
        padding: 0 .4em;
ransome1's avatar
ransome1 committed
522
523
524
525
526
527
      }
      .priority {
        background: transparent;
        color: darken($mid-grey, 40%);
        margin-right: .5em;
      }
528
529
      .text {
        margin-right: .5em;
530
      }
ransome1's avatar
ransome1 committed
531
    }
532
    .cell.spacer {
ransome1's avatar
ransome1 committed
533
534
535
      width: .5em;
      background: transparent;
    }
536
    .cell.priority {
ransome1's avatar
ransome1 committed
537
538
539
540
      background: $mid-grey;
      flex: 0 0 .5em;
      opacity: .5;
    }
541
542
    .cell.priority.A,
    .cell .priority.A {
ransome1's avatar
ransome1 committed
543
544
545
      color: #ffe6eb;
      background: $has-text-danger;
    }
546
547
    .cell.priority.B,
    .cell .priority.B {
ransome1's avatar
ransome1 committed
548
549
550
      color: #fadcd8;
      background: $has-text-attention;
    }
551
552
    .cell.priority.C,
    .cell .priority.C {
ransome1's avatar
ransome1 committed
553
554
      background: $has-text-warning;
    }
555
    .cell .contexts {
ransome1's avatar
ransome1 committed
556
557
      background: $sleek-contexts-button;
    }
558
    .cell .projects {
ransome1's avatar
ransome1 committed
559
560
      background: $sleek-projects-button;
    }
561
    .cell.itemDueDate {
ransome1's avatar
ransome1 committed
562
563
564
      color: $dark-grey;
      position: relative;
      white-space: nowrap;
565
      margin: 0 .25em 0 0;
ransome1's avatar
ransome1 committed
566
      text-transform: lowercase;
ransome1's avatar
ransome1 committed
567
      .fa-sort-down {
ransome1's avatar
ransome1 committed
568
        position: absolute;
569
        right: 0.2em;
ransome1's avatar
ransome1 committed
570
        bottom: 2.1em;
ransome1's avatar
ransome1 committed
571
572
573
574
575
576
        display: none;
      }
      .tags {
        position: absolute;
        top: -1.4em;
        right: -1.5em;
577
        z-index: 40;
ransome1's avatar
ransome1 committed
578
579
580
581
582
583
584
585
586
587
        display: none;
        .tag {
          margin: 0;
        }
        .is-dark {
          background: $dark-grey;
          font-family: FreeSansBold;
        }
      }
    }
588
589
    .cell.isToday,
    .cell.isToday .button {
ransome1's avatar
ransome1 committed
590
591
592
593
594
595
      color: $has-text-danger;
      .tags .is-dark {
        background: $has-text-danger;
        font-family: FreeSansBold;
      }
    }
596
597
    .cell.isTomorrow,
    .cell.isTomorrow .button {
ransome1's avatar
ransome1 committed
598
599
600
601
602
603
      color: $has-text-attention;
      .tags .is-dark {
        background: $has-text-attention;
        font-family: FreeSansBold;
      }
    }
604
605
    .cell.isPast,
    .cell.isPast .button {
ransome1's avatar
ransome1 committed
606
607
608
609
610
611
      color: $has-text-danger;
      .tags .is-dark {
        background: $has-text-danger;
        font-family: FreeSansBold;
      }
    }
612
613
    .cell:hover,
    .cell:focus {
ransome1's avatar
ransome1 committed
614
615
616
      .tags {
        display: block;
      }
ransome1's avatar
ransome1 committed
617
      i.fa-sort-down {
ransome1's avatar
ransome1 committed
618
619
620
        display: block;
      }
    }
621
622
  .todo.completed {
    .cell {
623
      filter: opacity(50%) grayscale(100%);
ransome1's avatar
ransome1 committed
624
    }
625
626
627
    .cell.priority {
      background: $has-text-link;
    }
ransome1's avatar
ransome1 committed
628
629
630
631
632
  }
}
#todoTable.is-active {
  display: block;
}
633
634
635
636
#modalForm[open]:not(:focus-within) {
  background-color: rgb(255, 255, 254);
  transition: background-color 0.01s;
}
ransome1's avatar
ransome1 committed
637
638
639
640
641
642
643
644
645
646
647
#modalForm {
  textarea#modalFormInput {
    min-height: 5.5em;
    overflow: hidden;
    resize: none;
  }
  #modalFormInputHelp,
  #modalFormInputResize {
    z-index: 60;
    cursor: pointer;
    pointer-events: all;
ransome1's avatar
ransome1 committed
648
649
650
    i {
      color: $has-text-link;
    }
ransome1's avatar
ransome1 committed
651
652
  }
  .card-header-title {
653
    font-family: 'FreeSansBold';
ransome1's avatar
ransome1 committed
654
655
656
657
  }
  .is-active {
    display: block;
  }
ransome1's avatar
ransome1 committed
658
659
660
  .icon {
    color: $has-text-link;
  }
ransome1's avatar
ransome1 committed
661
662
663
664
665
666
667
668
  .field {
    width: auto;
    float: left;
    margin: .5em .5em .5em 0;
    input,
    input::placeholder,
    select,
    select::placeholder {
669
      background: none !important;
ransome1's avatar
ransome1 committed
670
      border: none;
671
      color: $has-text-link !important;
ransome1's avatar
ransome1 committed
672
673
    }
  }
674
675
676
677
678
679
680
  .message {
    display: none;
    margin: 1em 0 0 0;
  }
  .message.is-active {
    display: block;
  }
ransome1's avatar
ransome1 committed
681
682
683
684
685
686
687
688
689
690
691
692
  #btnItemStatus {
    display: none;
    text-align: center;
  }
  #btnItemStatus.is-active {
    display: block;
  }
  button {
    font-size: 1em;
    background: none;
    color: $has-text-link;
    border: none;
693
    border-right: 1px solid $light-grey !important;
ransome1's avatar
ransome1 committed
694
695
696
697
698
699
700
701
    cursor: pointer;
  }
  .card-footer {
    clear: both;
  }
}
#autoCompleteContainer {
  height: auto;
702
  position: fixed;
ransome1's avatar
ransome1 committed
703
704
  display: none;
  z-index: 50;
705
706
  padding: 0.75em 1em;
  section {
ransome1's avatar
ransome1 committed
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
    margin: 0;
    .button {
      margin: 0 .5rem .5rem 0;
    }
  }
  h4.title {
    font-size: 1.3em;
    margin: .7em 0;
  }
}
#autoCompleteContainer.card {
  height: auto;
  overflow: auto;
}
#autoCompleteContainer.is-active {
  display: block;
}
724
725
726
727
728
729
#todoContext {
  display: none;
  position: fixed;
  z-index: 60;
  a {
    color: $has-text-link;
ransome1's avatar
ransome1 committed
730
    padding: 0.75em 1em;
731
732
733
734
735
  }
}
#todoContext.is-active {
  display: block;
}
736
#filterContext {
737
738
739
  display: none;
  position: fixed;
  z-index: 60;
740

741
  #filterContextDelete {
742
743
744
    color: $has-text-danger;
  }
}
745
#filterContext.is-active {
746
747
  display: block;
}
748
749
750
751
752
753
#modalPrompt {
  z-index: 60;
  .modal-content {
    width: 20em;
  }
}
ransome1's avatar
ransome1 committed
754
755
756

#sortByContainer {
  width: auto;
757
  float: none;
ransome1's avatar
ransome1 committed
758
  list-style: none;
759
760
761
762
  li {
    width: 100%;
    height: auto!important;
    line-height: 1.5em!important;
763
764
    margin: 0 0 2px 0;
    padding: 0.5em 1em;
765
766
    cursor: grab;
    white-space: nowrap;
767
    background: white;
768
    text-align: left;
769
770
    border-radius: 0.2em;
    border: none;
771
772
    i {
      color: $has-text-link;
773
774
      font-size: 0.9em;
      margin-right: 1em;
775
776
    }
  }
777
778
  li.drag-sort-active {
    border-left: 0.2em solid $has-text-link;
ransome1's avatar
ransome1 committed
779
  }
780
781
782
  // li:last-child {
  //   border: none;
  // }
ransome1's avatar
ransome1 committed
783
}
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
// .drag-box,
// .drag-box.tag,
// .drag-box:hover {
//   cursor: grab;
//   text-align: left;
//   margin: 0 0 0.25em 0;
//   padding: 0.4em 1em 0.5em 1em;
//   white-space: nowrap;
//   border-bottom: 1px solid $mid-grey;
//   i {
//     margin-right: 1em;
//     color: $has-text-link;
//   }
// }
// .drag-box-dragging,
// .drag-helper {
//   list-style: none;
//   cursor: grab;
//   border: none!important;
// }
ransome1's avatar
ransome1 committed
804
805


ransome1's avatar
ransome1 committed
806
807
.contentContainer {
  width: 100%;
ransome1's avatar
ransome1 committed
808
  height: 90%;
ransome1's avatar
ransome1 committed
809
810
811
812
813
814
815
816
817
818
819
  text-align: center;
  display: none;
  flex-direction: column;
  justify-content:center;
  p {
    margin: .5em;
  }
  .fa-file-alt {
    font-size: 6em;
  }
  .title.is-1 {
820
    font-family: 'FreeSansBold';
ransome1's avatar
ransome1 committed
821
822
823
824
825
826
827
828
829
830
831
    margin: .5em 0;
  }
  .subtitle {
    margin: .5em 0;
  }
  .btnOnboarding {
    font-size: 1em;
    margin: 0 1em;
    padding: .25em;
    text-decoration: none;
  }
ransome1's avatar
ransome1 committed
832
  .btnOnboarding i {
ransome1's avatar
ransome1 committed
833
834
835
836
837
838
839
840
841
    font-size: 5em;
    margin: .25em 0;
  }
}
.contentContainer.is-active {
  display: flex;
}
.columns {
  height: 100%;
842
  margin: 0 !important;
ransome1's avatar
ransome1 committed
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
  .column {
    position: relative;
    .is-right {
      float: right;
    }
  }
  .column.content {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.contexts {
  .button {
    background: $sleek-contexts-button;
    color: darken($sleek-contexts-button, 60%);
    span.tag {
      color: white;
      background: darken($sleek-contexts-button, 50%);
    }
  }
ransome1's avatar
ransome1 committed
863
  .button.is-dark, .button.is-dark:hover, .button.is-dark.is-hovered  {
ransome1's avatar
ransome1 committed
864
865
866
867
868
869
870
871
872
873
874
875
876
    background: darken($sleek-contexts-button, 65%);
    color: white;
  }
}
.projects {
  .button {
    background: $sleek-projects-button;
    color: darken($sleek-projects-button, 60%);
    span.tag {
      color: white;
      background: darken($sleek-projects-button, 50%);
    }
  }
ransome1's avatar
ransome1 committed
877
  .button.is-dark, .button.is-dark:hover, .button.is-dark.is-hovered {
ransome1's avatar
ransome1 committed
878
879
880
881
882
    background: darken($sleek-projects-button, 65%);
    color: white;
  }
}
.priority {
ransome1's avatar
ransome1 committed
883
884
  .button {
    font-size: 1.2em;
ransome1's avatar
ransome1 committed
885
886
887
888
889
890
891
892
893
    font-family: FreeSansBold;
    background: $mid-grey;
    color: darken($mid-grey, 40%);
    padding: .25em .7em;
    height: auto;
    span.tag {
      color: inherit;
    }
  }
ransome1's avatar
ransome1 committed
894
895
896
897
898
899
  .button:hover {
    color: darken($mid-grey, 40%);
    span.tag {
      color: inherit;
    }
  }
ransome1's avatar
ransome1 committed
900
901
902
903
  .button.is-dark span.tag {
    background: darken($mid-grey, 50%);
  }
  .button.is-dark, .button.is-dark:hover, .button.is-dark.is-hovered {
ransome1's avatar
ransome1 committed
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
    background: darken($mid-grey, 35%);
    color: white;
  }
  .button.A {
    background: $has-text-danger;
    color: lighten($has-text-danger, 35%);
    span.tag {
      color: $has-text-danger;
      background: lighten($has-text-danger, 35%);
    }
  }
  .button.A.is-dark {
    background: darken($has-text-danger, 20%);
    span.tag {
      color: darken($has-text-danger, 20%);
    }
  }
  .button.B {
    color: lighten($has-text-attention, 35%);
    background: $has-text-attention;
    span.tag {
      color: $has-text-attention;
      background: lighten($has-text-attention, 30%);
    }
  }
  .button.B.is-dark {
    background: darken($has-text-attention, 20%);
    span.tag {
      color: darken($has-text-attention, 20%);
    }
  }
  .button.C {
    color: lighten($has-text-warning, 35%);
    background: $has-text-warning;
    span.tag {
      color: $has-text-warning;
      background: lighten($has-text-warning, 30%);
    }
  }
  .button.C.is-dark {
    background: darken($has-text-warning, 20%);
    span.tag {
      color: darken($has-text-warning, 20%);
    }
  }
}
.toggle {
  margin: 0;
  text-align: center;
  .switch {
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 1.93em;
    .itemText {
      float: left;
    }
    input {
     opacity: 1;
     width: 3.5em;
     height: 1.9375em;
     background: none;
    }
    input:checked + .slider {
     background-color: $dark-grey;
    }
    input:focus + .slider {
     box-shadow: 0 0 1px $dark-grey;
    }
    input:focus-visible {
      outline: 2px solid $has-text-link;
    }
    input:checked + .slider:before {
     -webkit-transform: translateX(1.5625em);
     -ms-transform: translateX(1.5625em);
     transform: translateX(1.5625em);
    }
    .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: $mid-grey;
     -webkit-transition: .4s;
     transition: .4s;
    }
    .slider:before {
     position: absolute;
994
     content: '';
ransome1's avatar
ransome1 committed
995
996
997
998
999
1000
     height: 1.5625em;
     width: 1.5625em;
     left: 0.1875em;
     bottom: 0.1875em;
     background-color: white;
     -webkit-transition: .4s;