lens/src/renderer/components/app.scss

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

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

:root {
  --mainBackground: #1e2124;
  --main-layout-header: 40px;
}

::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(--main-layout-header);
  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: $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;
}

.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;
}