App.scss 14.7 KB
Newer Older
Jiayi Zheng's avatar
Jiayi Zheng committed
1
@import './_variables.scss';
2

lain's avatar
lain committed
3
#app {
4
  min-height: 100vh;
5 6
  max-width: 100%;
  overflow: hidden;
lain's avatar
.  
lain committed
7 8
}

Tae Hoon's avatar
Tae Hoon committed
9 10 11 12 13 14 15 16 17 18
.app-bg-wrapper {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

19 20 21 22
i {
  user-select: none;
}

lain's avatar
.  
lain committed
23
h4 {
24
  margin: 0;
lain's avatar
.  
lain committed
25 26 27
}

#content {
28 29 30 31 32 33
  box-sizing: border-box;
  padding-top: 60px;
  margin: auto;
  min-height: 100vh;
  max-width: 980px;
  background-color: rgba(0,0,0,0.15);
34
  align-content: flex-start;
lain's avatar
.  
lain committed
35 36 37
}

.text-center {
38
  text-align: center;
lain's avatar
.  
lain committed
39 40 41
}

body {
42
  font-family: sans-serif;
HJ's avatar
HJ committed
43
  font-family: var(--interfaceFont, sans-serif);
44 45
  font-size: 14px;
  margin: 0;
HJ's avatar
HJ committed
46 47
  color: $fallback--text;
  color: var(--text, $fallback--text);
48 49
  max-width: 100vw;
  overflow-x: hidden;
lain's avatar
.  
lain committed
50 51 52
}

a {
53 54 55
  text-decoration: none;
  color: $fallback--link;
  color: var(--link, $fallback--link);
lain's avatar
.  
lain committed
56 57
}

HJ's avatar
HJ committed
58
button {
59
  user-select: none;
HJ's avatar
HJ committed
60 61 62 63
  color: $fallback--text;
  color: var(--btnText, $fallback--text);
  background-color: $fallback--fg;
  background-color: var(--btn, $fallback--fg);
64
  border: none;
65 66
  border-radius: $fallback--btnRadius;
  border-radius: var(--btnRadius, $fallback--btnRadius);
67
  cursor: pointer;
HJ's avatar
HJ committed
68
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
69
  box-shadow: var(--buttonShadow);
70 71
  font-size: 14px;
  font-family: sans-serif;
HJ's avatar
HJ committed
72
  font-family: var(--interfaceFont, sans-serif);
73

HJ's avatar
HJ committed
74 75 76 77
  i[class*=icon-] {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
  }
78

HJ's avatar
HJ committed
79 80 81 82
  &::-moz-focus-inner {
    border: none;
  }

83 84
  &:hover {
    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
85
    box-shadow: var(--buttonHoverShadow);
86
  }
87

HJ's avatar
HJ committed
88
  &:active {
HJ's avatar
HJ committed
89
    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
90
    box-shadow: var(--buttonPressedShadow);
HJ's avatar
HJ committed
91 92
  }

93 94 95 96 97 98 99 100 101 102 103
  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.pressed {
    color: $fallback--faint;
    color: var(--faint, $fallback--faint);
    background-color: $fallback--bg;
    background-color: var(--bg, $fallback--bg)
  }
Eugenij's avatar
Eugenij committed
104 105 106 107 108 109 110 111

  &.danger {
    // TODO: add better color variable
    color: $fallback--text;
    color: var(--alertErrorPanelText, $fallback--text);
    background-color: $fallback--alertError;
    background-color: var(--alertError, $fallback--alertError);
  }
hakui's avatar
hakui committed
112 113
}

114 115
label.select {
  padding: 0;
116

117 118 119
}

input, textarea, .select {
120
  border: none;
HJ's avatar
HJ committed
121 122
  border-radius: $fallback--inputRadius;
  border-radius: var(--inputRadius, $fallback--inputRadius);
HJ's avatar
HJ committed
123
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
124
  box-shadow: var(--inputShadow);
HJ's avatar
HJ committed
125 126 127 128
  background-color: $fallback--fg;
  background-color: var(--input, $fallback--fg);
  color: $fallback--lightText;
  color: var(--inputText, $fallback--lightText);
129
  font-family: sans-serif;
HJ's avatar
HJ committed
130
  font-family: var(--inputFont, sans-serif);
131
  font-size: 14px;
HJ's avatar
HJ committed
132
  padding: 8px .5em;
133
  box-sizing: border-box;
134 135
  display: inline-block;
  position: relative;
HJ's avatar
HJ committed
136
  height: 28px;
137
  line-height: 16px;
HJ's avatar
HJ committed
138
  hyphens: none;
139

140 141 142 143 144
  &:disabled, &[disabled=disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

145 146 147 148 149 150
  .icon-down-open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    height: 100%;
HJ's avatar
HJ committed
151 152
    color: $fallback--text;
    color: var(--text, $fallback--text);
HJ's avatar
HJ committed
153
    line-height: 28px;
154 155 156
    z-index: 0;
    pointer-events: none;
  }
157

158 159 160 161 162 163
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
HJ's avatar
HJ committed
164
    color: $fallback--text;
165
    color: var(--inputText, --text, $fallback--text);
166
    margin: 0;
HJ's avatar
HJ committed
167 168 169 170
    padding: 0 2em 0 .2em;
    font-family: sans-serif;
    font-family: var(--inputFont, sans-serif);
    font-size: 14px;
171 172
    width: 100%;
    z-index: 1;
HJ's avatar
HJ committed
173
    height: 28px;
174
    line-height: 16px;
175
  }
176

HJ's avatar
HJ committed
177 178 179 180 181 182 183 184
  &[type=range] {
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
    flex: 1;
  }

185 186 187 188
  &[type=radio],
  &[type=checkbox] {
    display: none;
    &:checked + label::before {
HJ's avatar
HJ committed
189 190
      color: $fallback--text;
      color: var(--text, $fallback--text);
191
    }
192
    &:disabled {
193 194 195 196 197 198
      &,
      & + label,
      & + label::before {
        opacity: .5;
      }
    }
199 200 201 202 203 204
    + label::before {
      display: inline-block;
      content: '✔';
      transition: color 200ms;
      width: 1.1em;
      height: 1.1em;
HJ's avatar
HJ committed
205 206
      border-radius: $fallback--checkboxRadius;
      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
207
      box-shadow: 0px 0px 2px black inset;
208
      box-shadow: var(--inputShadow);
209
      margin-right: .5em;
HJ's avatar
HJ committed
210 211
      background-color: $fallback--fg;
      background-color: var(--input, $fallback--fg);
212
      vertical-align: top;
213 214 215 216 217 218
      text-align: center;
      line-height: 1.1em;
      font-size: 1.1em;
      box-sizing: border-box;
      color: transparent;
      overflow: hidden;
219
      box-sizing: border-box;
220 221 222 223
    }
  }
}

224
option {
HJ's avatar
HJ committed
225 226
  color: $fallback--text;
  color: var(--text, $fallback--text);
227 228 229 230
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
}

HJ's avatar
fixes  
HJ committed
231
i[class*=icon-] {
232 233
  color: $fallback--icon;
  color: var(--icon, $fallback--icon)
234 235 236
}


lain's avatar
.  
lain committed
237
.container {
238 239 240 241
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 10px 0 10px;
lain's avatar
.  
lain committed
242 243 244
}

.item {
245
  flex: 1;
HJ's avatar
HJ committed
246 247
  line-height: 50px;
  height: 50px;
248
  overflow: hidden;
HJ's avatar
HJ committed
249 250
  display: flex;
  flex-wrap: wrap;
251

252 253 254
  .nav-icon {
    margin-left: 0.4em;
  }
lain's avatar
.  
lain committed
255

HJ's avatar
HJ committed
256
  &.right {
HJ's avatar
HJ committed
257
    justify-content: flex-end;
HJ's avatar
HJ committed
258
  }
lain's avatar
.  
lain committed
259 260 261
}

.auto-size {
262
  flex: 1
lain's avatar
.  
lain committed
263 264
}

265 266
.nav-bar {
  padding: 0;
267 268 269 270 271
  width: 100%;
  align-items: center;
  position: fixed;
  height: 50px;

272 273 274 275 276 277 278 279 280 281 282 283
  .logo {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    align-items: stretch;
    justify-content: center;
    flex: 0 0 auto;
    z-index: -1;
284 285 286
    transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 100ms;
287

288 289 290 291 292
    .mask {
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      background-color: $fallback--fg;
293
      background-color: var(--topBarText, $fallback--fg);
294 295 296 297 298 299
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
300

301
    img {
302 303
      height: 100%;
      object-fit: contain;
304 305 306 307 308
      display: block;
      flex: 0;
    }
  }

309
  .inner-nav {
310 311 312 313
    margin: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
314
    display: flex;
lain's avatar
.  
lain committed
315
    align-items: center;
316
    flex-basis: 970px;
lain's avatar
.  
lain committed
317
    height: 50px;
318

HJ's avatar
HJ committed
319
    a, a i {
320
      color: $fallback--link;
HJ's avatar
HJ committed
321
      color: var(--topBarLink, $fallback--link);
322
    }
323
  }
lain's avatar
.  
lain committed
324 325 326
}

main-router {
327
  flex: 1;
lain's avatar
.  
lain committed
328 329 330
}

.status.compact {
331 332
  color: rgba(0, 0, 0, 0.42);
  font-weight: 300;
lain's avatar
.  
lain committed
333

334 335 336 337
  p {
    margin: 0;
    font-size: 0.8em
  }
lain's avatar
.  
lain committed
338 339 340 341 342
}

/* Panel */

.panel {
343
  display: flex;
344 345
  position: relative;

346 347
  flex-direction: column;
  margin: 0.5em;
lain's avatar
.  
lain committed
348

349 350
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
351

352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370
  &::after, & {
    border-radius: $fallback--panelRadius;
    border-radius: var(--panelRadius, $fallback--panelRadius);
  }

  &::after {
    content: '';
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    pointer-events: none;

    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
    box-shadow: var(--panelShadow);
  }
371 372 373
}

.panel-body:empty::before {
374 375 376 377
  content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
  display: block;
  margin: 1em;
  text-align: center;
lain's avatar
.  
lain committed
378 379 380
}

.panel-heading {
HJ's avatar
HJ committed
381
  display: flex;
Tae Hoon's avatar
Tae Hoon committed
382
  flex: none;
383 384
  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
385
  background-size: cover;
HJ's avatar
HJ committed
386
  padding: .6em .6em;
387
  text-align: left;
388
  line-height: 28px;
389
  color: var(--panelText);
HJ's avatar
HJ committed
390 391
  background-color: $fallback--fg;
  background-color: var(--panel, $fallback--fg);
HJ's avatar
HJ committed
392
  align-items: baseline;
393
  box-shadow: var(--panelHeaderShadow);
HJ's avatar
HJ committed
394 395 396

  .title {
    flex: 1 0 auto;
397 398 399
    font-size: 1.3em;
  }

HJ's avatar
HJ committed
400 401 402 403 404 405
  .faint {
    background-color: transparent;
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }

406 407 408 409
  .alert {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
HJ's avatar
HJ committed
410 411 412
  }

  button {
413 414 415 416 417 418 419 420 421 422 423 424
    flex-shrink: 0;
  }

  button, .alert {
    // height: 100%;
    line-height: 21px;
    min-height: 0;
    box-sizing: border-box;
    margin: 0;
    margin-left: .25em;
    min-width: 1px;
    align-self: stretch;
HJ's avatar
HJ committed
425
  }
426 427 428 429 430

  a {
    color: $fallback--link;
    color: var(--panelLink, $fallback--link)
  }
lain's avatar
.  
lain committed
431 432
}

433 434 435 436 437
.panel-heading.stub {
  border-radius: $fallback--panelRadius;
  border-radius: var(--panelRadius, $fallback--panelRadius);
}

lain's avatar
.  
lain committed
438
.panel-footer {
439 440
  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
441

442 443 444 445 446 447

  .faint {
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }

448 449 450 451
  a {
    color: $fallback--link;
    color: var(--panelLink, $fallback--link)
  }
lain's avatar
.  
lain committed
452 453 454
}

.panel-body > p {
455 456 457
  line-height: 18px;
  padding: 1em;
  margin: 0;
lain's avatar
.  
lain committed
458 459
}

lain's avatar
lain committed
460
.container > * {
461
  min-width: 0px;
lain's avatar
.  
lain committed
462 463 464
}

.fa {
465
  color: grey;
lain's avatar
.  
lain committed
466 467
}

lain's avatar
lain committed
468
nav {
469
  z-index: 1000;
470
  color: var(--topBarText);
HJ's avatar
HJ committed
471 472
  background-color: $fallback--fg;
  background-color: var(--topBar, $fallback--fg);
473 474 475
  color: $fallback--faint;
  color: var(--faint, $fallback--faint);
  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
476
  box-shadow: var(--topBarShadow);
HJ's avatar
HJ committed
477 478 479 480 481 482 483 484 485 486 487 488 489 490

  .back-button {
    display: block;
    max-width: 99px;
    transition-property: opacity, max-width;
    transition-duration: 300ms;
    transition-timing-function: ease-out;

    i {
      margin: 0 1em;
    }

    &.hidden {
      opacity: 0;
491
      max-width: 5px;
HJ's avatar
HJ committed
492 493
    }
  }
lain's avatar
lain committed
494
}
lain's avatar
lain committed
495 496 497 498 499 500 501

.fade-enter-active, .fade-leave-active {
  transition: opacity .2s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
lain's avatar
lain committed
502 503

.main {
Shpuld Shpludson's avatar
Shpuld Shpludson committed
504
  flex-basis: 50%;
505 506
  flex-grow: 1;
  flex-shrink: 1;
lain's avatar
lain committed
507
}
lain's avatar
lain committed
508

509
.sidebar-bounds {
510
  flex: 0;
511
  flex-basis: 35%;
lain's avatar
lain committed
512 513
}

514 515
.sidebar-flexer {
  flex: 1;
516
  flex-basis: 345px;
517 518 519
  width: 365px;
}

lain's avatar
lain committed
520
.mobile-shown {
521
  display: none;
lain's avatar
lain committed
522 523
}

Shpuld Shpludson's avatar
Shpuld Shpludson committed
524
@media all and (min-width: 800px) {
525 526 527
  body {
    overflow-y: scroll;
  }
HJ's avatar
HJ committed
528 529 530 531 532 533 534

  nav {
    .back-button {
      display: none;
    }
  }

535
  .sidebar-bounds {
536 537
    overflow: hidden;
    max-height: 100vh;
538
    width: 345px;
539 540 541
    position: fixed;
    margin-top: -10px;

542
    .sidebar-scroller {
543
      height: 96vh;
544
      width: 365px;
545
      padding-top: 10px;
546
      padding-right: 50px;
547
      overflow-x: hidden;
548
      overflow-y: scroll;
549
    }
550 551 552 553

    .sidebar {
      width: 345px;
    }
554 555 556
  }
  .sidebar-flexer {
    max-height: 96vh;
557 558
    flex-shrink: 0;
    flex-grow: 0;
559 560
  }
}
HJ's avatar
HJ committed
561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581
.badge {
  display: inline-block;
  border-radius: 99px;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0;

  &.badge-notification {
    background-color: $fallback--cRed;
    background-color: var(--badgeNotification, $fallback--cRed);
    color: white;
    color: var(--badgeNotificationText, white);
  }
}
582

583 584 585 586 587 588 589 590 591
.alert {
  margin: 0.35em;
  padding: 0.25em;
  border-radius: $fallback--tooltipRadius;
  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
  min-height: 28px;
  line-height: 28px;

  &.error {
HJ's avatar
updates  
HJ committed
592 593
    background-color: $fallback--alertError;
    background-color: var(--alertError, $fallback--alertError);
594 595 596 597 598 599 600
    color: $fallback--text;
    color: var(--alertErrorText, $fallback--text);

    .panel-heading & {
      color: $fallback--text;
      color: var(--alertErrorPanelText, $fallback--text);
    }
601 602 603
  }
}

604 605
.faint {
  color: $fallback--faint;
Shpuld Shpludson's avatar
Shpuld Shpludson committed
606
  color: var(--faint, $fallback--faint);
607
}
608 609 610 611 612 613 614 615 616 617

.faint-link {
  color: $fallback--faint;
  color: var(--faint, $fallback--faint);

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

Shpuld Shpludson's avatar
Shpuld Shpludson committed
618
@media all and (min-width: 800px) {
619 620 621 622
  .logo {
    opacity: 1 !important;
  }
}
623

624 625
.item.right {
  text-align: right;
lain's avatar
lain committed
626
}
lain's avatar
lain committed
627

628 629 630 631 632 633
.visibility-tray {
  font-size: 1.2em;
  padding: 3px;
  cursor: pointer;

  .selected {
HJ's avatar
HJ committed
634 635
    color: $fallback--lightText;
    color: var(--lightText, $fallback--lightText);
636
  }
637

638 639 640
  div {
    padding-top: 5px;
  }
641 642 643 644 645 646 647 648 649
}

.visibility-notice {
  padding: .5em;
  border: 1px solid $fallback--faint;
  border: 1px solid var(--faint, $fallback--faint);
  border-radius: $fallback--inputRadius;
  border-radius: var(--inputRadius, $fallback--inputRadius);
}
650

651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675
@keyframes modal-background-fadein {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.modal-view {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  animation-duration: 0.2s;
  background-color: rgba(0, 0, 0, 0.5);
  animation-name: modal-background-fadein;
}

676 677 678 679
.button-icon {
  font-size: 1.2em;
}

680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706
@keyframes shakeError {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(0.375rem);
  }
  30% {
    transform: translateX(-0.375rem);
  }
  45% {
    transform: translateX(0.375rem);
  }
  60% {
    transform: translateX(-0.375rem);
  }
  75% {
    transform: translateX(0.375rem);
  }
  90% {
    transform: translateX(-0.375rem);
  }
  100% {
    transform: translateX(0);
  }
}

Shpuld Shpludson's avatar
Shpuld Shpludson committed
707
@media all and (max-width: 800px) {
708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723
  .mobile-hidden {
    display: none;
  }

  .panel-switcher {
    display: flex;
  }

  .container {
    padding: 0;
  }

  .panel {
    margin: 0.5em 0 0.5em 0;
  }

724 725 726 727
  .menu-button {
    display: block;
    margin-right: 0.8em;
  }
728
}
729 730 731

.login-hint {
  text-align: center;
732

733 734 735 736 737 738 739 740 741 742
  @media all and (min-width: 801px) {
    display: none;
  }

  a {
    display: inline-block;
    padding: 1em 0px;
    width: 100%;
  }
}
Edijs Bov's avatar
Edijs Bov committed
743 744 745 746

.btn.btn-default {
  min-height: 28px;
}
747 748 749 750 751 752 753 754 755 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 786 787 788 789 790 791 792 793 794 795 796 797

.autocomplete {
  &-panel {
    position: relative;

    &-body {
      margin: 0 0.5em 0 0.5em;
      border-radius: $fallback--tooltipRadius;
      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
      position: absolute;
      z-index: 1;
      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
      // this doesn't match original but i don't care, making it uniform.
      box-shadow: var(--popupShadow);
      min-width: 75%;
      background: $fallback--bg;
      background: var(--bg, $fallback--bg);
      color: $fallback--lightText;
      color: var(--lightText, $fallback--lightText);
    }
  }

  &-item {
    cursor: pointer;
    padding: 0.2em 0.4em 0.2em 0.4em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    display: flex;

    img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    span {
      line-height: 24px;
      margin: 0 0.1em 0 0.2em;
    }

    small {
      margin-left: .5em;
      color: $fallback--faint;
      color: var(--faint, $fallback--faint);
    }

    &.highlighted {
      background-color: $fallback--fg;
      background-color: var(--lightBg, $fallback--fg);
    }
  }
}