electron-react-typescript-webpack-2022/src/renderer/components/Application.less

Custom boilerplate for writing Desktop Applications using Electron, React, Webpack, TypeScript in 2022

//-----------------------------------------
// Variables
//-----------------------------------------

@base-bg-color: #1f252c;
@base-text-color: #d8d8d8;
@base-font-size: 16px;
@base-line-height: 1.25;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu,
  Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@cont-bg-color: #1f252d;

//-----------------------------------------
// Selection
//-----------------------------------------
::selection {
  background: rgb(234 137 54 / 35%);
}

//-----------------------------------------
// Scrollbars
//-----------------------------------------

/* Wrapper */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #2f2f2f52;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(59, 59, 59, 0.541);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

//-----------------------------------------
// Style Rules
//-----------------------------------------

html,
body,
#app {
  height: 100%;
}

body {
  margin: 0;
  font-size: @base-font-size;
  font-family: @base-font-family;
  color: @base-text-color;
  background-color: @base-bg-color;
  line-height: @base-line-height;
  background: linear-gradient(180deg, #242a32, #242c34);
}

a {
  color: #58aaff;
  text-decoration: none;

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

h1 {
  margin: 0;
}

#app {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  &.has-border {
    border: 1px solid #c7c7c70d;
  }
}

#erwt {
  user-select: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;

  .header {
    padding: 3rem 2rem 0rem 2rem;
    max-width: 700px;
    margin: 0 auto;
  }
  .footer {
    background: #1c2127;
    padding: 2rem;
  }
}

button {
  background-color: #2d5e2b;
  border: 0;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  font-family: @base-font-family;
  outline: none;

  &:hover {
    background-color: #275425;
  }
  &:active {
    background-color: #224b20;
  }

  & > span {
    display: inline-block;
    margin-left: 0.75rem;
    background-color: rgb(0 0 0 / 30%);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
  }
}

.hidden {
  display: none !important;
}

.center {
  text-align: center;
}

.main {
  &-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;

    img {
      margin-right: 1rem;
    }

    h1 {
      font-size: 1.5em;
      font-weight: 400;
      color: #85aeec;
      line-height: 1;
      text-transform: uppercase;
    }
  }

  &-teaser {
    color: #898e97;
    background-color: #1b2026;
    padding: 1em;
    border-radius: 10px;
    line-height: 1.6;
    font-size: 1em;
    display: flex;
    margin-bottom: 2em;

    &.small {
      font-size: 0.9375em;
      color: #898e97;
      background: #1f252c;
    }

    img {
      object-fit: contain;
      margin: 0 2em 0 1em;
    }
  }
}

.versions {
  display: flex;
  justify-content: space-evenly;

  & > span {
    padding: 8px 10px;
    background: #1c2127;
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
    margin: 0 1rem 1rem 0;
    color: #adadad;

    & > span {
      color: #7092b5;
      margin-left: 0.375rem;
    }
  }
}