App.scss 15.4 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
.app-bg-wrapper {
  position: fixed;
  z-index: -1;
  height: 100%;
13 14
  left: 0;
  right: -20px;
Tae Hoon's avatar
Tae Hoon committed
15 16 17 18 19
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

20
i[class^='icon-'] {
21 22 23
  user-select: none;
}

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

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

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

42 43 44 45
html {
  font-size: 14px;
}

lain's avatar
.  
lain committed
46
body {
47
  font-family: sans-serif;
HJ's avatar
HJ committed
48
  font-family: var(--interfaceFont, sans-serif);
49
  margin: 0;
HJ's avatar
HJ committed
50 51
  color: $fallback--text;
  color: var(--text, $fallback--text);
52 53
  max-width: 100vw;
  overflow-x: hidden;
54 55
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
56 57 58 59

  &.hidden {
    display: none;
  }
lain's avatar
.  
lain committed
60 61 62
}

a {
63 64 65
  text-decoration: none;
  color: $fallback--link;
  color: var(--link, $fallback--link);
lain's avatar
.  
lain committed
66 67
}

HJ's avatar
HJ committed
68
button {
69
  user-select: none;
HJ's avatar
HJ committed
70 71 72 73
  color: $fallback--text;
  color: var(--btnText, $fallback--text);
  background-color: $fallback--fg;
  background-color: var(--btn, $fallback--fg);
74
  border: none;
75 76
  border-radius: $fallback--btnRadius;
  border-radius: var(--btnRadius, $fallback--btnRadius);
77
  cursor: pointer;
HJ's avatar
HJ committed
78
  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;
79
  box-shadow: var(--buttonShadow);
80 81
  font-size: 14px;
  font-family: sans-serif;
HJ's avatar
HJ committed
82
  font-family: var(--interfaceFont, sans-serif);
83

HJ's avatar
HJ committed
84 85 86 87
  i[class*=icon-] {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
  }
88

HJ's avatar
HJ committed
89 90 91 92
  &::-moz-focus-inner {
    border: none;
  }

93 94
  &:hover {
    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
95
    box-shadow: var(--buttonHoverShadow);
96
  }
97

HJ's avatar
HJ committed
98
  &:active {
HJ's avatar
HJ committed
99
    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;
100
    box-shadow: var(--buttonPressedShadow);
HJ's avatar
HJ committed
101 102
  }

103 104 105 106 107 108 109 110 111 112 113
  &: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
114 115 116 117 118 119 120 121

  &.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
122 123
}

124 125
label.select {
  padding: 0;
126

127 128 129
}

input, textarea, .select {
130
  border: none;
HJ's avatar
HJ committed
131 132
  border-radius: $fallback--inputRadius;
  border-radius: var(--inputRadius, $fallback--inputRadius);
HJ's avatar
HJ committed
133
  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;
134
  box-shadow: var(--inputShadow);
HJ's avatar
HJ committed
135 136 137 138
  background-color: $fallback--fg;
  background-color: var(--input, $fallback--fg);
  color: $fallback--lightText;
  color: var(--inputText, $fallback--lightText);
139
  font-family: sans-serif;
HJ's avatar
HJ committed
140
  font-family: var(--inputFont, sans-serif);
141
  font-size: 14px;
142
  margin: 0;
HJ's avatar
HJ committed
143
  padding: 8px .5em;
144
  box-sizing: border-box;
145 146
  display: inline-block;
  position: relative;
HJ's avatar
HJ committed
147
  height: 28px;
148
  line-height: 16px;
HJ's avatar
HJ committed
149
  hyphens: none;
150

151 152 153 154 155
  &:disabled, &[disabled=disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

156 157 158 159 160 161
  .icon-down-open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    height: 100%;
HJ's avatar
HJ committed
162 163
    color: $fallback--text;
    color: var(--text, $fallback--text);
HJ's avatar
HJ committed
164
    line-height: 28px;
165 166 167
    z-index: 0;
    pointer-events: none;
  }
168

169 170 171 172 173 174
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
HJ's avatar
HJ committed
175
    color: $fallback--text;
176
    color: var(--inputText, --text, $fallback--text);
177
    margin: 0;
HJ's avatar
HJ committed
178 179 180 181
    padding: 0 2em 0 .2em;
    font-family: sans-serif;
    font-family: var(--inputFont, sans-serif);
    font-size: 14px;
182 183
    width: 100%;
    z-index: 1;
HJ's avatar
HJ committed
184
    height: 28px;
185
    line-height: 16px;
186
  }
187

HJ's avatar
HJ committed
188 189 190 191 192 193 194 195
  &[type=range] {
    background: none;
    border: none;
    margin: 0;
    box-shadow: none;
    flex: 1;
  }

lain's avatar
lain committed
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
  &[type=radio] {
    display: none;
    &:checked + label::before {
      box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
      box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
      background-color: var(--link, $fallback--link);
    }
    &:disabled {
      &,
      & + label,
      & + label::before {
        opacity: .5;
      }
    }
    + label::before {
Shpuld Shpludson's avatar
Shpuld Shpludson committed
211
      flex-shrink: 0;
lain's avatar
lain committed
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
      display: inline-block;
      content: '';
      transition: box-shadow 200ms;
      width: 1.1em;
      height: 1.1em;
      border-radius: 100%; // Radio buttons should always be circle
      box-shadow: 0px 0px 2px black inset;
      box-shadow: var(--inputShadow);
      margin-right: .5em;
      background-color: $fallback--fg;
      background-color: var(--input, $fallback--fg);
      vertical-align: top;
      text-align: center;
      line-height: 1.1em;
      font-size: 1.1em;
      box-sizing: border-box;
      color: transparent;
      overflow: hidden;
      box-sizing: border-box;
    }
  }

234 235 236
  &[type=checkbox] {
    display: none;
    &:checked + label::before {
HJ's avatar
HJ committed
237 238
      color: $fallback--text;
      color: var(--text, $fallback--text);
239
    }
240
    &:disabled {
241 242 243 244 245 246
      &,
      & + label,
      & + label::before {
        opacity: .5;
      }
    }
247
    + label::before {
Shpuld Shpludson's avatar
Shpuld Shpludson committed
248
      flex-shrink: 0;
249 250 251 252 253
      display: inline-block;
      content: '✔';
      transition: color 200ms;
      width: 1.1em;
      height: 1.1em;
HJ's avatar
HJ committed
254 255
      border-radius: $fallback--checkboxRadius;
      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
256
      box-shadow: 0px 0px 2px black inset;
257
      box-shadow: var(--inputShadow);
258
      margin-right: .5em;
HJ's avatar
HJ committed
259 260
      background-color: $fallback--fg;
      background-color: var(--input, $fallback--fg);
261
      vertical-align: top;
262 263 264 265 266 267
      text-align: center;
      line-height: 1.1em;
      font-size: 1.1em;
      box-sizing: border-box;
      color: transparent;
      overflow: hidden;
268
      box-sizing: border-box;
269 270 271 272
    }
  }
}

273
option {
HJ's avatar
HJ committed
274 275
  color: $fallback--text;
  color: var(--text, $fallback--text);
276 277 278 279
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
}

lain's avatar
lain committed
280 281 282 283 284 285 286 287 288
.hide-number-spinner {
  -moz-appearance: textfield;
  &[type=number]::-webkit-inner-spin-button,
  &[type=number]::-webkit-outer-spin-button {
    opacity: 0;
    display: none;
  }
}

HJ's avatar
fixes  
HJ committed
289
i[class*=icon-] {
290 291
  color: $fallback--icon;
  color: var(--icon, $fallback--icon)
292 293
}

Tae Hoon's avatar
Tae Hoon committed
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
.btn-block {
  display: block;
  width: 100%;
}

.btn-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  button {
    position: relative;
    flex: 1 1 auto;

    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
319

lain's avatar
.  
lain committed
320
.container {
321 322 323 324
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 10px 0 10px;
lain's avatar
.  
lain committed
325 326 327
}

.item {
328
  flex: 1;
HJ's avatar
HJ committed
329 330
  line-height: 50px;
  height: 50px;
331
  overflow: hidden;
HJ's avatar
HJ committed
332 333
  display: flex;
  flex-wrap: wrap;
334

335 336 337
  .nav-icon {
    margin-left: 0.4em;
  }
lain's avatar
.  
lain committed
338

HJ's avatar
HJ committed
339
  &.right {
HJ's avatar
HJ committed
340
    justify-content: flex-end;
HJ's avatar
HJ committed
341
  }
lain's avatar
.  
lain committed
342 343 344
}

.auto-size {
345
  flex: 1
lain's avatar
.  
lain committed
346 347
}

348 349
.nav-bar {
  padding: 0;
350 351 352 353
  width: 100%;
  align-items: center;
  position: fixed;
  height: 50px;
354
  box-sizing: border-box;
355

356 357 358 359 360 361 362 363 364 365 366 367
  .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;
368 369 370
    transition: opacity;
    transition-timing-function: ease-out;
    transition-duration: 100ms;
371

372 373 374 375 376
    .mask {
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      background-color: $fallback--fg;
377
      background-color: var(--topBarText, $fallback--fg);
378 379 380 381 382 383
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
384

385
    img {
386 387
      height: 100%;
      object-fit: contain;
388 389 390 391 392
      display: block;
      flex: 0;
    }
  }

393
  .inner-nav {
394
    position: relative;
395 396 397 398
    margin: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
399
    display: flex;
lain's avatar
.  
lain committed
400
    align-items: center;
401
    flex-basis: 970px;
lain's avatar
.  
lain committed
402
    height: 50px;
403

HJ's avatar
HJ committed
404
    a, a i {
405
      color: $fallback--link;
HJ's avatar
HJ committed
406
      color: var(--topBarLink, $fallback--link);
407
    }
408
  }
lain's avatar
.  
lain committed
409 410 411
}

main-router {
412
  flex: 1;
lain's avatar
.  
lain committed
413 414 415
}

.status.compact {
416 417
  color: rgba(0, 0, 0, 0.42);
  font-weight: 300;
lain's avatar
.  
lain committed
418

419 420 421 422
  p {
    margin: 0;
    font-size: 0.8em
  }
lain's avatar
.  
lain committed
423 424 425 426 427
}

/* Panel */

.panel {
428
  display: flex;
429 430
  position: relative;

431 432
  flex-direction: column;
  margin: 0.5em;
lain's avatar
.  
lain committed
433

434 435
  background-color: $fallback--bg;
  background-color: var(--bg, $fallback--bg);
436

437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455
  &::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);
  }
456 457 458
}

.panel-body:empty::before {
459 460 461 462
  content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
  display: block;
  margin: 1em;
  text-align: center;
lain's avatar
.  
lain committed
463 464 465
}

.panel-heading {
HJ's avatar
HJ committed
466
  display: flex;
Tae Hoon's avatar
Tae Hoon committed
467
  flex: none;
468 469
  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
470
  background-size: cover;
HJ's avatar
HJ committed
471
  padding: .6em .6em;
472
  text-align: left;
473
  line-height: 28px;
474
  color: var(--panelText);
HJ's avatar
HJ committed
475 476
  background-color: $fallback--fg;
  background-color: var(--panel, $fallback--fg);
HJ's avatar
HJ committed
477
  align-items: baseline;
478
  box-shadow: var(--panelHeaderShadow);
HJ's avatar
HJ committed
479 480 481

  .title {
    flex: 1 0 auto;
482 483 484
    font-size: 1.3em;
  }

HJ's avatar
HJ committed
485 486 487 488 489 490
  .faint {
    background-color: transparent;
    color: $fallback--faint;
    color: var(--panelFaint, $fallback--faint);
  }

491 492 493 494
  .alert {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
HJ's avatar
HJ committed
495 496 497
  }

  button {
498 499 500 501 502 503 504 505 506 507 508 509
    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
510
  }
511 512 513 514 515

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

518 519 520 521 522
.panel-heading.stub {
  border-radius: $fallback--panelRadius;
  border-radius: var(--panelRadius, $fallback--panelRadius);
}

lain's avatar
.  
lain committed
523
.panel-footer {
524 525
  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
526

527 528 529 530 531 532

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

533 534 535 536
  a {
    color: $fallback--link;
    color: var(--panelLink, $fallback--link)
  }
lain's avatar
.  
lain committed
537 538 539
}

.panel-body > p {
540 541 542
  line-height: 18px;
  padding: 1em;
  margin: 0;
lain's avatar
.  
lain committed
543 544
}

lain's avatar
lain committed
545
.container > * {
546
  min-width: 0px;
lain's avatar
.  
lain committed
547 548 549
}

.fa {
550
  color: grey;
lain's avatar
.  
lain committed
551 552
}

lain's avatar
lain committed
553
nav {
554
  z-index: 1000;
555
  color: var(--topBarText);
HJ's avatar
HJ committed
556 557
  background-color: $fallback--fg;
  background-color: var(--topBar, $fallback--fg);
558 559 560
  color: $fallback--faint;
  color: var(--faint, $fallback--faint);
  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
561
  box-shadow: var(--topBarShadow);
lain's avatar
lain committed
562
}
lain's avatar
lain committed
563 564 565 566 567 568 569

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

.main {
Shpuld Shpludson's avatar
Shpuld Shpludson committed
572
  flex-basis: 50%;
573 574
  flex-grow: 1;
  flex-shrink: 1;
lain's avatar
lain committed
575
}
lain's avatar
lain committed
576

577
.sidebar-bounds {
578
  flex: 0;
579
  flex-basis: 35%;
lain's avatar
lain committed
580 581
}

582 583
.sidebar-flexer {
  flex: 1;
584
  flex-basis: 345px;
585 586 587
  width: 365px;
}

lain's avatar
lain committed
588
.mobile-shown {
589
  display: none;
lain's avatar
lain committed
590 591
}

Shpuld Shpludson's avatar
Shpuld Shpludson committed
592
@media all and (min-width: 800px) {
593 594 595
  body {
    overflow-y: scroll;
  }
HJ's avatar
HJ committed
596

597
  .sidebar-bounds {
598 599
    overflow: hidden;
    max-height: 100vh;
600
    width: 345px;
601 602 603
    position: fixed;
    margin-top: -10px;

604
    .sidebar-scroller {
605
      height: 96vh;
606
      width: 365px;
607
      padding-top: 10px;
608
      padding-right: 50px;
609
      overflow-x: hidden;
610
      overflow-y: scroll;
611
    }
612 613 614 615

    .sidebar {
      width: 345px;
    }
616 617 618
  }
  .sidebar-flexer {
    max-height: 96vh;
619 620
    flex-shrink: 0;
    flex-grow: 0;
621 622
  }
}
HJ's avatar
HJ committed
623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643
.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);
  }
}
644

645 646 647 648 649 650 651 652 653
.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
654 655
    background-color: $fallback--alertError;
    background-color: var(--alertError, $fallback--alertError);
656 657 658 659 660 661 662
    color: $fallback--text;
    color: var(--alertErrorText, $fallback--text);

    .panel-heading & {
      color: $fallback--text;
      color: var(--alertErrorPanelText, $fallback--text);
    }
663 664 665
  }
}

666 667
.faint {
  color: $fallback--faint;
Shpuld Shpludson's avatar
Shpuld Shpludson committed
668
  color: var(--faint, $fallback--faint);
669
}
670 671 672 673 674 675 676 677 678 679

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

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

Shpuld Shpludson's avatar
Shpuld Shpludson committed
680
@media all and (min-width: 800px) {
681 682 683 684
  .logo {
    opacity: 1 !important;
  }
}
685

686 687
.item.right {
  text-align: right;
lain's avatar
lain committed
688
}
lain's avatar
lain committed
689

690 691 692 693 694 695 696
.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);
}
697

698 699 700 701 702 703 704 705 706 707 708 709 710
.notice-dismissible {
  padding-right: 4rem;
  position: relative;

  .dismiss {
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em;
    color: inherit;
  }
}

711 712 713 714
.button-icon {
  font-size: 1.2em;
}

715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741
@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
742
@media all and (max-width: 800px) {
743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758
  .mobile-hidden {
    display: none;
  }

  .panel-switcher {
    display: flex;
  }

  .container {
    padding: 0;
  }

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

759 760 761 762
  .menu-button {
    display: block;
    margin-right: 0.8em;
  }
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 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828
.setting-item {
  border-bottom: 2px solid var(--fg, $fallback--fg);
  margin: 1em 1em 1.4em;
  padding-bottom: 1.4em;

  > div {
    margin-bottom: .5em;
    &:last-child {
      margin-bottom: 0;
    }
  }

  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1em;
  }

  select {
    min-width: 10em;
  }


  textarea {
    width: 100%;
    max-width: 100%;
    height: 100px;
  }

  .unavailable,
  .unavailable i {
    color: var(--cRed, $fallback--cRed);
    color: $fallback--cRed;
  }

  .btn {
    min-height: 28px;
    min-width: 10em;
    padding: 0 2em;
  }

  .number-input {
    max-width: 6em;
  }
}
.select-multiple {
  display: flex;
  .option-list {
    margin: 0;
    padding-left: .5em;
  }
}
.setting-list,
.option-list{
  list-style-type: none;
  padding-left: 2em;
  li {
    margin-bottom: 0.5em;
  }
  .suboptions {
    margin-top: 0.3em
  }
}

829 830
.login-hint {
  text-align: center;
831

832 833 834 835 836 837 838 839 840 841
  @media all and (min-width: 801px) {
    display: none;
  }

  a {
    display: inline-block;
    padding: 1em 0px;
    width: 100%;
  }
}
Edijs Bov's avatar
Edijs Bov committed
842 843 844 845

.btn.btn-default {
  min-height: 28px;
}