lens/src/renderer/components/app.scss

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

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

#terminal-init {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  visibility: hidden;
  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;
}