index.scss 21.9 KB
Newer Older
Eugen's avatar
Eugen committed
1
.app-body {
2
3
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
tom's avatar
tom committed
4
5
}

Eugen Rochko's avatar
Eugen Rochko committed
6
.button {
7
  background-color: darken($ui-highlight-color, 3%);
Eugen Rochko's avatar
Eugen Rochko committed
8
  border: 10px none;
9
10
  border-radius: 4px;
  box-sizing: border-box;
11
  color: $primary-text-color;
12
13
14
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
Eugen Rochko's avatar
Eugen Rochko committed
15
16
17
  font-size: 14px;
  font-weight: 500;
  height: 36px;
18
  letter-spacing: 0;
Eugen Rochko's avatar
Eugen Rochko committed
19
  line-height: 36px;
20
21
22
23
24
  overflow: hidden;
  padding: 0 16px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
Eugen Rochko's avatar
Eugen Rochko committed
25
  text-decoration: none;
26
  text-overflow: ellipsis;
Eugen Rochko's avatar
Eugen Rochko committed
27
  transition: all 100ms ease-in;
28
  white-space: nowrap;
29
  width: auto;
Eugen Rochko's avatar
Eugen Rochko committed
30

31
32
33
  &:active,
  &:focus,
  &:hover {
34
    background-color: lighten($ui-highlight-color, 7%);
Eugen Rochko's avatar
Eugen Rochko committed
35
    transition: all 200ms ease-out;
Eugen Rochko's avatar
Eugen Rochko committed
36
37
38
  }

  &:disabled {
39
    background-color: $ui-primary-color;
40
    cursor: default;
Eugen Rochko's avatar
Eugen Rochko committed
41
  }
42

imncls's avatar
imncls committed
43
44
45
46
  &.button-primary,
  &.button-alternative,
  &.button-secondary,
  &.button-alternative-2 {
47
48
49
50
51
    font-size: 16px;
    line-height: 36px;
    height: auto;
    text-transform: none;
    padding: 4px 16px;
imncls's avatar
imncls committed
52
53
54
  }

  &.button-alternative {
55
    color: $inverted-text-color;
imncls's avatar
imncls committed
56
    background: $ui-primary-color;
57
58
59
60
61
62
63
64

    &:active,
    &:focus,
    &:hover {
      background-color: lighten($ui-primary-color, 4%);
    }
  }

imncls's avatar
imncls committed
65
66
67
68
69
70
71
72
73
74
  &.button-alternative-2 {
    background: $ui-base-lighter-color;

    &:active,
    &:focus,
    &:hover {
      background-color: lighten($ui-base-lighter-color, 4%);
    }
  }

75
  &.button-secondary {
76
77
78
    font-size: 16px;
    line-height: 36px;
    height: auto;
79
    color: $darker-text-color;
80
81
82
    text-transform: none;
    background: transparent;
    padding: 3px 15px;
83
    border-radius: 4px;
84
85
86
87
88
89
    border: 1px solid $ui-primary-color;

    &:active,
    &:focus,
    &:hover {
      border-color: lighten($ui-primary-color, 4%);
90
      color: lighten($darker-text-color, 4%);
91
    }
92
  }
93
94
95
96
97
98
99

  &.button--block {
    display: block;
    width: 100%;
  }
}

Eugen Rochko's avatar
Eugen Rochko committed
100
.icon-button {
Eugen Rochko's avatar
Eugen Rochko committed
101
102
  display: inline-block;
  padding: 0;
103
  color: $action-button-color;
104
105
  border: none;
  background: transparent;
106
  cursor: pointer;
107
  transition: color 100ms ease-in;
Eugen Rochko's avatar
Eugen Rochko committed
108

109
110
111
  &:hover,
  &:active,
  &:focus {
112
    color: lighten($action-button-color, 7%);
113
    transition: color 200ms ease-out;
Eugen Rochko's avatar
Eugen Rochko committed
114
115
116
  }

  &.disabled {
117
    color: darken($action-button-color, 13%);
Eugen Rochko's avatar
Eugen Rochko committed
118
119
    cursor: default;
  }
120
121

  &.active {
122
    color: $highlight-text-color;
123
  }
Eugen Rochko's avatar
Eugen Rochko committed
124

Eugen Rochko's avatar
Eugen Rochko committed
125
126
127
128
  &::-moz-focus-inner {
    border: 0;
  }

129
130
131
  &::-moz-focus-inner,
  &:focus,
  &:active {
Eugen Rochko's avatar
Eugen Rochko committed
132
133
134
135
    outline: 0 !important;
  }

  &.inverted {
136
    color: $lighter-text-color;
Eugen Rochko's avatar
Eugen Rochko committed
137

138
139
140
    &:hover,
    &:active,
    &:focus {
141
      color: darken($lighter-text-color, 7%);
Eugen Rochko's avatar
Eugen Rochko committed
142
143
    }

144
    &.disabled {
145
      color: lighten($lighter-text-color, 7%);
146
147
    }

Eugen Rochko's avatar
Eugen Rochko committed
148
    &.active {
149
      color: $highlight-text-color;
Eugen Rochko's avatar
Eugen Rochko committed
150

151
      &.disabled {
152
        color: lighten($highlight-text-color, 13%);
153
      }
Eugen Rochko's avatar
Eugen Rochko committed
154
155
    }
  }
156
157
158

  &.overlayed {
    box-sizing: content-box;
159
160
    background: rgba($base-overlay-background, 0.6);
    color: rgba($primary-text-color, 0.7);
161
162
163
164
    border-radius: 4px;
    padding: 2px;

    &:hover {
165
      background: rgba($base-overlay-background, 0.9);
166
167
    }
  }
Eugen Rochko's avatar
Eugen Rochko committed
168
169
170
}

.text-icon-button {
171
  color: $lighter-text-color;
Eugen Rochko's avatar
Eugen Rochko committed
172
173
174
175
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
Eugen Rochko's avatar
Eugen Rochko committed
176
  font-size: 11px;
Eugen Rochko's avatar
Eugen Rochko committed
177
178
179
  padding: 0 3px;
  line-height: 27px;
  outline: 0;
180
  transition: color 100ms ease-in;
Eugen Rochko's avatar
Eugen Rochko committed
181

182
183
184
  &:hover,
  &:active,
  &:focus {
185
    color: darken($lighter-text-color, 7%);
186
    transition: color 200ms ease-out;
Eugen Rochko's avatar
Eugen Rochko committed
187
188
189
  }

  &.disabled {
190
    color: lighten($lighter-text-color, 20%);
Eugen Rochko's avatar
Eugen Rochko committed
191
192
193
194
    cursor: default;
  }

  &.active {
195
    color: $highlight-text-color;
Eugen Rochko's avatar
Eugen Rochko committed
196
197
198
199
200
201
  }

  &::-moz-focus-inner {
    border: 0;
  }

202
203
204
  &::-moz-focus-inner,
  &:focus,
  &:active {
Eugen Rochko's avatar
Eugen Rochko committed
205
    outline: 0 !important;
Eugen Rochko's avatar
Eugen Rochko committed
206
  }
Eugen Rochko's avatar
Eugen Rochko committed
207
208
}

209
210
.dropdown-menu {
  position: absolute;
211
  transform-origin: 50% 0;
212
213
}

214
215
216
.invisible {
  font-size: 0;
  line-height: 0;
Misty De Meo's avatar
Misty De Meo committed
217
218
  display: inline-block;
  width: 0;
219
220
  height: 0;
  position: absolute;
221
222
223
224
225
226
227
228
229

  img,
  svg {
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
230
231
232
}

.ellipsis {
233
  &::after {
234
235
236
237
    content: "…";
  }
}

ncls7615's avatar
ncls7615 committed
238
.notification__favourite-icon-wrapper {
kibi!'s avatar
kibi! committed
239
  left: 0;
ncls7615's avatar
ncls7615 committed
240
241
  position: absolute;

kibi!'s avatar
kibi! committed
242
  .fa.star-icon {
ncls7615's avatar
ncls7615 committed
243
244
    color: $gold-star;
  }
245
246
}

ncls7615's avatar
ncls7615 committed
247
248
.star-icon.active {
  color: $gold-star;
249
250
}

251
252
253
254
.bookmark-icon.active {
  color: $red-bookmark;
}

ncls7615's avatar
ncls7615 committed
255
256
257
258
259
260
261
262
263
.notification__display-name {
  color: inherit;
  font-weight: 500;
  text-decoration: none;

  &:hover {
    color: $primary-text-color;
    text-decoration: underline;
  }
ncls7615's avatar
ncls7615 committed
264
265
}

ncls7615's avatar
ncls7615 committed
266
.display-name {
ncls7615's avatar
ncls7615 committed
267
  display: block;
ncls7615's avatar
ncls7615 committed
268
  padding: 6px 0;
ncls7615's avatar
ncls7615 committed
269
  max-width: 100%;
ncls7615's avatar
ncls7615 committed
270
  height: 36px;
ncls7615's avatar
ncls7615 committed
271
  overflow: hidden;
ncls7615's avatar
ncls7615 committed
272
273
  text-overflow: ellipsis;
  white-space: nowrap;
ncls7615's avatar
ncls7615 committed
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

  strong {
    display: block;
    height: 18px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  span {
    display: block;
    height: 18px;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  &:hover {
    strong {
      text-decoration: underline;
    }
  }

  &.inline {
    padding: 0;
    height: 18px;
    font-size: 15px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    strong {
      display: inline;
      height: auto;
      font-size: inherit;
      line-height: inherit;
    }

    span {
      display: inline;
      height: auto;
      font-size: inherit;
      line-height: inherit;
    }
  }
ncls7615's avatar
ncls7615 committed
325
326
}

ncls7615's avatar
ncls7615 committed
327
328
.display-name__html {
  font-weight: 500;
ncls7615's avatar
ncls7615 committed
329
330
}

ncls7615's avatar
ncls7615 committed
331
332
.display-name__account {
  font-size: 14px;
ncls7615's avatar
ncls7615 committed
333
334
}

ncls7615's avatar
ncls7615 committed
335
336
.image-loader {
  position: relative;
Thibaut Girka's avatar
Thibaut Girka committed
337
338
  width: 100%;
  height: 100%;
Thibaut Girka's avatar
Thibaut Girka committed
339
340
341
  display: flex;
  align-items: center;
  justify-content: center;
342
  flex-direction: column;
Thibaut Girka's avatar
Thibaut Girka committed
343
344
345
346
347
348
349

  .image-loader__preview-canvas {
    max-width: $media-modal-media-max-width;
    max-height: $media-modal-media-max-height;
    background: url('~images/void.png') repeat;
    object-fit: contain;
  }
350

351
352
  .loading-bar {
    position: relative;
353
354
  }

Thibaut Girka's avatar
Thibaut Girka committed
355
356
  &.image-loader--amorphous .image-loader__preview-canvas {
    display: none;
Eugen Rochko's avatar
Eugen Rochko committed
357
  }
Thibaut Girka's avatar
Thibaut Girka committed
358
}
359

Thibaut Girka's avatar
Thibaut Girka committed
360
361
362
363
364
.zoomable-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
Thibaut Girka's avatar
Thibaut Girka committed
365
366
367
368
369
370
371
372
373
374
  align-items: center;
  justify-content: center;

  img {
    max-width: $media-modal-media-max-width;
    max-height: $media-modal-media-max-height;
    width: auto;
    height: auto;
    object-fit: contain;
  }
Eugen Rochko's avatar
Eugen Rochko committed
375
}
Eugen Rochko's avatar
Eugen Rochko committed
376

ncls7615's avatar
ncls7615 committed
377
.dropdown {
378
379
380
  display: inline-block;
}

ncls7615's avatar
ncls7615 committed
381
382
.dropdown__content {
  display: none;
ncls7615's avatar
ncls7615 committed
383
  position: absolute;
384
385
}

ncls7615's avatar
ncls7615 committed
386
387
388
389
.dropdown-menu__separator {
  border-bottom: 1px solid darken($ui-secondary-color, 8%);
  margin: 5px 7px 6px;
  height: 0;
390
391
}

ncls7615's avatar
ncls7615 committed
392
393
394
395
396
.dropdown-menu {
  background: $ui-secondary-color;
  padding: 4px 0;
  border-radius: 4px;
  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
397

ncls7615's avatar
ncls7615 committed
398
399
  ul {
    list-style: none;
400
  }
ncls7615's avatar
ncls7615 committed
401
}
402

ncls7615's avatar
ncls7615 committed
403
404
405
406
407
.dropdown-menu__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid transparent;
408

ncls7615's avatar
ncls7615 committed
409
410
411
412
413
  &.left {
    right: -5px;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: $ui-secondary-color;
Eugen Rochko's avatar
Eugen Rochko committed
414
415
  }

ncls7615's avatar
ncls7615 committed
416
417
  &.top {
    bottom: -5px;
Thibaut Girka's avatar
Thibaut Girka committed
418
    margin-left: -7px;
ncls7615's avatar
ncls7615 committed
419
420
    border-width: 5px 7px 0;
    border-top-color: $ui-secondary-color;
421
422
  }

ncls7615's avatar
ncls7615 committed
423
424
  &.bottom {
    top: -5px;
Thibaut Girka's avatar
Thibaut Girka committed
425
    margin-left: -7px;
ncls7615's avatar
ncls7615 committed
426
427
428
    border-width: 0 7px 5px;
    border-bottom-color: $ui-secondary-color;
  }
Eugen Rochko's avatar
Eugen Rochko committed
429

ncls7615's avatar
ncls7615 committed
430
431
432
433
434
  &.right {
    left: -5px;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: $ui-secondary-color;
Eugen Rochko's avatar
Eugen Rochko committed
435
  }
436
437
}

ncls7615's avatar
ncls7615 committed
438
439
440
441
442
443
444
445
446
.dropdown-menu__item {
  a {
    font-size: 13px;
    line-height: 18px;
    display: block;
    padding: 4px 14px;
    box-sizing: border-box;
    text-decoration: none;
    background: $ui-secondary-color;
447
    color: $inverted-text-color;
ncls7615's avatar
ncls7615 committed
448
449
450
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
451

ncls7615's avatar
ncls7615 committed
452
453
454
455
    &:focus,
    &:hover,
    &:active {
      background: $ui-highlight-color;
456
      color: $secondary-text-color;
ncls7615's avatar
ncls7615 committed
457
      outline: 0;
458
459
460
461
    }
  }
}

ncls7615's avatar
ncls7615 committed
462
.dropdown--active .dropdown__content {
ncls7615's avatar
ncls7615 committed
463
  display: block;
ncls7615's avatar
ncls7615 committed
464
465
466
467
468
  line-height: 18px;
  max-width: 311px;
  right: 0;
  text-align: left;
  z-index: 9999;
kibigo!'s avatar
kibigo! committed
469

ncls7615's avatar
ncls7615 committed
470
471
472
473
474
475
476
477
478
  & > ul {
    list-style: none;
    background: $ui-secondary-color;
    padding: 4px 0;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
    min-width: 140px;
    position: relative;
  }
479

ncls7615's avatar
ncls7615 committed
480
481
482
  &.dropdown__right {
    right: 0;
  }
483

ncls7615's avatar
ncls7615 committed
484
485
486
487
488
489
490
491
492
493
494
495
496
497
  &.dropdown__left {
    & > ul {
      left: -98px;
    }
  }

  & > ul > li > a {
    font-size: 13px;
    line-height: 18px;
    display: block;
    padding: 4px 14px;
    box-sizing: border-box;
    text-decoration: none;
    background: $ui-secondary-color;
498
    color: $inverted-text-color;
499
500
501
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
ncls7615's avatar
ncls7615 committed
502
503
504
505
506
507
508

    &:focus {
      outline: 0;
    }

    &:hover {
      background: $ui-highlight-color;
509
      color: $secondary-text-color;
ncls7615's avatar
ncls7615 committed
510
    }
511
512
513
  }
}

ncls7615's avatar
ncls7615 committed
514
515
.dropdown__icon {
  vertical-align: middle;
516
517
}

ncls7615's avatar
ncls7615 committed
518
519
520
.static-content {
  padding: 10px;
  padding-top: 20px;
521
  color: $dark-text-color;
522

ncls7615's avatar
ncls7615 committed
523
524
525
526
527
  h1 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 40px;
    text-align: center;
528
  }
529

ncls7615's avatar
ncls7615 committed
530
531
532
  p {
    font-size: 13px;
    margin-bottom: 20px;
533
  }
534
535
}

ncls7615's avatar
ncls7615 committed
536
.tabs-bar {
537
  display: flex;
ncls7615's avatar
ncls7615 committed
538
539
540
  background: lighten($ui-base-color, 8%);
  flex: 0 0 auto;
  overflow-y: auto;
541
542
}

ncls7615's avatar
ncls7615 committed
543
544
545
546
547
.tabs-bar__link {
  display: block;
  flex: 1 1 auto;
  padding: 15px 10px;
  color: $primary-text-color;
548
  text-decoration: none;
ncls7615's avatar
ncls7615 committed
549
550
551
552
553
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid lighten($ui-base-color, 8%);
  transition: all 200ms linear;
554

ncls7615's avatar
ncls7615 committed
555
556
557
  .fa {
    font-weight: 400;
    font-size: 16px;
558
559
  }

ncls7615's avatar
ncls7615 committed
560
561
  &.active {
    border-bottom: 2px solid $ui-highlight-color;
562
    color: $highlight-text-color;
ncls7615's avatar
ncls7615 committed
563
  }
ncls7615's avatar
ncls7615 committed
564

ncls7615's avatar
ncls7615 committed
565
566
567
568
569
570
  &:hover,
  &:focus,
  &:active {
    @include multi-columns('screen and (min-width: 631px)') {
      background: lighten($ui-base-color, 14%);
      transition: all 100ms linear;
ncls7615's avatar
ncls7615 committed
571
    }
572
  }
573

574
  span:last-child {
ncls7615's avatar
ncls7615 committed
575
576
    margin-left: 5px;
    display: none;
577
  }
578
579
}

ncls7615's avatar
ncls7615 committed
580
581
582
583
@include multi-columns('screen and (min-width: 631px)', $parent: null) {
  .tabs-bar {
    display: none;
  }
584
585
}

ncls7615's avatar
ncls7615 committed
586
587
588
589
590
591
.scrollable {
  overflow-y: scroll;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform; // improves perf in mobile Chrome
Eugen Rochko's avatar
Eugen Rochko committed
592

ncls7615's avatar
ncls7615 committed
593
594
  &.optionally-scrollable {
    overflow-y: auto;
Eugen Rochko's avatar
Eugen Rochko committed
595
  }
596

ncls7615's avatar
ncls7615 committed
597
598
  @supports(display: grid) { // hack to fix Chrome <57
    contain: strict;
599
  }
600
601
602
603
604
605
606
607
608

  &--flex {
    display: flex;
    flex-direction: column;
  }

  &__append {
    flex: 1 1 auto;
    position: relative;
609
    min-height: 120px;
610
  }
Eugen Rochko's avatar
Eugen Rochko committed
611
612
}

ncls7615's avatar
ncls7615 committed
613
614
615
.scrollable.fullscreen {
  @supports(display: grid) { // hack to fix Chrome <57
    contain: none;
ncls7615's avatar
ncls7615 committed
616
617
618
  }
}

ncls7615's avatar
ncls7615 committed
619
620
621
622
623
624
625
626
627
628
629
.react-toggle {
  display: inline-block;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
  -webkit-tap-highlight-color: transparent;
}
Eugen Rochko's avatar
Eugen Rochko committed
630

ncls7615's avatar
ncls7615 committed
631
632
633
634
635
636
637
638
639
640
.react-toggle-screenreader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
Eugen Rochko's avatar
Eugen Rochko committed
641

ncls7615's avatar
ncls7615 committed
642
643
644
645
646
.react-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transition: opacity 0.25s;
}
647

ncls7615's avatar
ncls7615 committed
648
649
650
651
652
653
654
655
.react-toggle-track {
  width: 50px;
  height: 24px;
  padding: 0;
  border-radius: 30px;
  background-color: $ui-base-color;
  transition: all 0.2s ease;
}
656

ncls7615's avatar
ncls7615 committed
657
658
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: darken($ui-base-color, 10%);
Eugen Rochko's avatar
Eugen Rochko committed
659
660
}

ncls7615's avatar
ncls7615 committed
661
662
663
.react-toggle--checked .react-toggle-track {
  background-color: $ui-highlight-color;
}
664

ncls7615's avatar
ncls7615 committed
665
666
667
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  background-color: lighten($ui-highlight-color, 10%);
}
668

ncls7615's avatar
ncls7615 committed
669
670
671
672
673
674
675
676
677
678
679
680
.react-toggle-track-check {
  position: absolute;
  width: 14px;
  height: 10px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  left: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
681
682
}

ncls7615's avatar
ncls7615 committed
683
684
685
686
687
688
.react-toggle--checked .react-toggle-track-check {
  opacity: 1;
  transition: opacity 0.25s ease;
}

.react-toggle-track-x {
ncls7615's avatar
ncls7615 committed
689
  position: absolute;
ncls7615's avatar
ncls7615 committed
690
691
692
693
694
695
696
697
698
699
700
  width: 10px;
  height: 10px;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  line-height: 0;
  right: 10px;
  opacity: 1;
  transition: opacity 0.25s ease;
}
701

ncls7615's avatar
ncls7615 committed
702
703
.react-toggle--checked .react-toggle-track-x {
  opacity: 0;
704
705
}

ncls7615's avatar
ncls7615 committed
706
707
708
709
710
711
712
713
714
715
716
717
.react-toggle-thumb {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  border: 1px solid $ui-base-color;
  border-radius: 50%;
  background-color: darken($simple-background-color, 2%);
  box-sizing: border-box;
  transition: all 0.25s ease;
718
719
}

ncls7615's avatar
ncls7615 committed
720
721
722
723
724
725
726
727
.react-toggle--checked .react-toggle-thumb {
  left: 27px;
  border-color: $ui-highlight-color;
}

.getting-started__wrapper,
.getting_started {
  background: $ui-base-color;
728
729
}

ncls7615's avatar
ncls7615 committed
730
731
732
.getting-started__wrapper {
  position: relative;
  overflow-y: auto;
Eugen Rochko's avatar
Eugen Rochko committed
733
}
734

ncls7615's avatar
ncls7615 committed
735
736
737
.getting-started {
  background: $ui-base-color;
  flex: 1 0 auto;
Eugen Rochko's avatar
Eugen Rochko committed
738

ncls7615's avatar
ncls7615 committed
739
  p {
740
    color: $secondary-text-color;
741
  }
742

ncls7615's avatar
ncls7615 committed
743
  a {
744
    color: $dark-text-color;
745
  }
746

747
748
749
750
751
  &__panel {
    height: min-content;
  }

  &__panel,
752
753
754
  &__footer {
    padding: 10px;
    padding-top: 20px;
755
    flex: 0 1 auto;
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785

    ul {
      margin-bottom: 10px;
    }

    ul li {
      display: inline;
    }

    p {
      color: $dark-text-color;
      font-size: 13px;

      a {
        color: $dark-text-color;
        text-decoration: underline;
      }
    }

    a {
      text-decoration: none;
      color: $darker-text-color;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }
ncls7615's avatar
ncls7615 committed
786
}
787

cwm's avatar
cwm committed
788
789
790
791
792
793
794
795
796
797
798
.column-link__badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 12px;
  line-height: 19px;
  font-weight: 500;
  background: $ui-base-color;
  padding: 4px 8px;
  margin: -6px 10px;
}

ncls7615's avatar
ncls7615 committed
799
800
801
.keyboard-shortcuts {
  padding: 8px 0 0;
  overflow: hidden;
802

ncls7615's avatar
ncls7615 committed
803
804
805
806
  thead {
    position: absolute;
    left: -9999px;
  }
807

ncls7615's avatar
ncls7615 committed
808
809
810
811
812
813
814
815
816
  td {
    padding: 0 10px 8px;
  }

  kbd {
    display: inline-block;
    padding: 3px 5px;
    background-color: lighten($ui-base-color, 8%);
    border: 1px solid darken($ui-base-color, 4%);
817
  }
818
819
}

ncls7615's avatar
ncls7615 committed
820
.setting-text {
821
  color: $darker-text-color;
ncls7615's avatar
ncls7615 committed
822
823
824
825
826
827
828
829
830
  background: transparent;
  border: none;
  border-bottom: 2px solid $ui-primary-color;
  box-sizing: border-box;
  display: block;
  font-family: inherit;
  margin-bottom: 10px;
  padding: 7px 0;
  width: 100%;
ncls7615's avatar
ncls7615 committed
831

ncls7615's avatar
ncls7615 committed
832
833
  &:focus,
  &:active {
ncls7615's avatar
ncls7615 committed
834
    color: $primary-text-color;
ncls7615's avatar
ncls7615 committed
835
    border-bottom-color: $ui-highlight-color;
ncls7615's avatar
ncls7615 committed
836
837
  }

ncls7615's avatar
ncls7615 committed
838
839
  @include limited-single-column('screen and (max-width: 600px)') {
    font-size: 16px;
ncls7615's avatar
ncls7615 committed
840
841
  }

ncls7615's avatar
ncls7615 committed
842
  &.light {
843
    color: $inverted-text-color;
ncls7615's avatar
ncls7615 committed
844
845
846
847
    border-bottom: 2px solid lighten($ui-base-color, 27%);

    &:focus,
    &:active {
848
      color: $inverted-text-color;
ncls7615's avatar
ncls7615 committed
849
850
      border-bottom-color: $ui-highlight-color;
    }
ncls7615's avatar
ncls7615 committed
851
852
853
  }
}

ncls7615's avatar
ncls7615 committed
854
855
856
857
858
859
860
.no-reduce-motion button.icon-button i.fa-retweet {
  background-position: 0 0;
  height: 19px;
  transition: background-position 0.9s steps(10);
  transition-duration: 0s;
  vertical-align: middle;
  width: 22px;
ncls7615's avatar
ncls7615 committed
861

ncls7615's avatar
ncls7615 committed
862
863
864
  &::before {
    display: none !important;
  }
ncls7615's avatar
ncls7615 committed
865
866
}

ncls7615's avatar
ncls7615 committed
867
868
869
.no-reduce-motion button.icon-button.active i.fa-retweet {
  transition-duration: 0.9s;
  background-position: 0 100%;
870
871
}

ncls7615's avatar
ncls7615 committed
872
.reduce-motion button.icon-button i.fa-retweet {
873
  color: $action-button-color;
ncls7615's avatar
ncls7615 committed
874
  transition: color 100ms ease-in;
875
876
}

ncls7615's avatar
ncls7615 committed
877
.reduce-motion button.icon-button.active i.fa-retweet {
878
  color: $highlight-text-color;
Eugen Rochko's avatar
Eugen Rochko committed
879
880
}

881
882
883
884
.reduce-motion button.icon-button.disabled i.fa-retweet {
  color: darken($action-button-color, 13%);
}

ncls7615's avatar
ncls7615 committed
885
.load-more {
Eugen Rochko's avatar
Eugen Rochko committed
886
  display: block;
887
  color: $dark-text-color;
ncls7615's avatar
ncls7615 committed
888
889
890
891
892
893
894
  background-color: transparent;
  border: 0;
  font-size: inherit;
  text-align: center;
  line-height: inherit;
  margin: 0;
  padding: 15px;
895
  box-sizing: border-box;
ncls7615's avatar
ncls7615 committed
896
897
  width: 100%;
  clear: both;
898
  text-decoration: none;
899

ncls7615's avatar
ncls7615 committed
900
901
  &:hover {
    background: lighten($ui-base-color, 2%);
902
903
  }
}
904

905
906
907
908
.load-gap {
  border-bottom: 1px solid lighten($ui-base-color, 8%);
}

ncls7615's avatar
ncls7615 committed
909
.missing-indicator {
910
  padding-top: 20px + 48px;
911
912
}

ncls7615's avatar
ncls7615 committed
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
.scrollable > div > :first-child .notification__dismiss-overlay > .wrappy {
  border-top: 1px solid $ui-base-color;
}

.notification__dismiss-overlay {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  padding-left: 15px; // space for the box shadow to be visible

  z-index: 999;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;

  display: flex;

  .wrappy {
    width: $dismiss-overlay-width;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: lighten($ui-base-color, 8%);
    border-left: 1px solid lighten($ui-base-color, 20%);
    box-shadow: 0 0 5px black;
    border-bottom: 1px solid $ui-base-color;
  }

  .ckbox {
    border: 2px solid $ui-primary-color;
    border-radius: 2px;
    width: 30px;
    height: 30px;
    font-size: 20px;
951
    color: $darker-text-color;
ncls7615's avatar
ncls7615 committed
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
    text-shadow: 0 0 5px black;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:focus {
    outline: 0 !important;

    .ckbox {
      box-shadow: 0 0 1px 1px $ui-highlight-color;
    }
  }
}

ncls7615's avatar
ncls7615 committed
967
968
969
970
971
972
973
974
.text-btn {
  display: inline-block;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: 0;
  background: transparent;
Eugen's avatar
Eugen committed
975
  cursor: pointer;
ncls7615's avatar
ncls7615 committed
976
}
Eugen's avatar
Eugen committed
977

ncls7615's avatar
ncls7615 committed
978
.loading-indicator {
979
  color: $dark-text-color;
ncls7615's avatar
ncls7615 committed
980
981
982
983
984
985
986
987
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  overflow: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
988

ncls7615's avatar
ncls7615 committed
989
990
991
992
993
994
995
  span {
    display: block;
    float: left;
    margin-left: 50%;
    transform: translateX(-50%);
    margin: 82px 0 0 50%;
    white-space: nowrap;
996
997
998
  }
}

ncls7615's avatar
ncls7615 committed
999
1000
.loading-indicator__figure {
  position: absolute;
For faster browsing, not all history is shown. View entire blame