lens/src/renderer/components/app.scss

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "~flex.box"; // todo: replace with tailwind's flexbox classes
@import "./fonts";
@import "../themes/theme-vars";

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

*, *: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: var(--primary);
  color: white;
}

*:target {
  color: var(--textColorAccent);
}

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

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

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

  > * {
    height: inherit;
  }
}

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

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

label {
  color: var(--textColorSecondary);
}

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

h1 {
  color: var(--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 * 0.5 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(var(--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: var(--colorSuccess);
}

.info {
  color: var(--colorInfo);
}

.error {
  color: var(--colorError);
}

.warning {
  color: var(--colorWarning);
}

.contrast {
  color: var(--textColorAccent);
}

.text-secondary {
  color: var(--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;
}