lens/src/renderer/components/app.scss

@import "~flex.box";
@import "fonts";

:root {
  --unit: 8px;
  --padding: var(--unit);
  --margin: var(--unit);
  --border-radius: 3px;
  --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --font-monospace: Lucida Console, Monaco, Consolas, monospace;
  --font-size-small: calc(1.5 * var(--unit));
  --font-size: calc(1.75 * var(--unit));
  --font-size-big: calc(2 * var(--unit));
  --font-weight-thin: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --main-layout-header: 40px;
  --drag-region-height: 22px
}

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 16px;
  height: 15px; // Align sizes visually
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollBarColor);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-right-width: 5px;
  border-radius: 16px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::selection {
  background: $primary;
  color: white;
}

html {
  font-size: 62.5%; // 1 rem == 10px
  color: $textColorPrimary;
  background-color: $mainBackground;
  --flex-gap: #{$padding};
}

html, body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100%;
  min-height: 100%;

  > * {
    height: inherit;
  }
}

#draggable-top {
  @include set-draggable;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--drag-region-height);
  z-index: 1000;
  pointer-events: none;
}

body {
  font: $font-size $font-main;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

label {
  color: $textColorSecondary;
}

ol, ul {
  margin: 0;
  list-style: none;
}

hr {
  margin: $margin 0 !important;
  height: 1px;
  background: $grey-800;
}

h1 {
  color: $textColorPrimary;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: -.010em;
  margin: 0;
}

h2 {
  @extend h1;
  font-size: 24px;
}

h3 {
  @extend h2;
  font-size: 20px;
}

h4 {
  @extend h3;
  font-size: 18px;
}

h5 {
  @extend h4;
  padding: $padding / 2 0;
  font-size: 16px;
}

h6 {
  @extend h5;
  font-size: 12px;
}

small {
  font-size: $font-size-small;
}

code {
  display: inline-block;
  padding: 0.2em;
  vertical-align: middle;
  border-radius: $radius;
  font-family: $font-monospace;
  font-size: calc($font-size * .9);
  color: #b4b5b4;

  &.block {
    @include hidden-scrollbar;
    background: #1a1919;
    display: block;
    white-space: pre;
    padding: $padding * 2;
  }
}

a {
  color: inherit;
  cursor: pointer;

  [href] {
    text-decoration: underline;
  }

  &:not([href]) {
    border-bottom: 1px dotted;
    text-decoration: none;
  }
}

// colors
.success {
  color: $colorSuccess;
}

.info {
  color: $colorInfo;
}

.error {
  color: $colorError;
}

.warning {
  color: $colorWarning;
}

.contrast {
  color: $textColorAccent;
}

.text-secondary {
  color: $textColorSecondary;
}

.nobr {
  white-space: nowrap;
}

.flow {
  --flow-space: #{$margin * 1.5};

  &:not(.column) {
    > * + * {
      margin-left: var(--flow-space);
    }
  }

  &.column {
    > * + * {
      margin-top: var(--flow-space);
    }
  }
}

// app's common loading indicator, displaying on the route transitions
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -15px;
  z-index: 1000;

  &.hidden {
    display: none;
  }
}

// hack-fix: remove crappy yellow background from auto-filled inputs in chrome
@keyframes autofill-remove-bgc {
  to {
    color: inherit;
    background: inherit;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill-remove-bgc;
  -webkit-animation-fill-mode: both;
}