omegaupload/web/src/main.scss

// OmegaUpload Web Frontend
// Copyright (C) 2021  Edward Shen
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.

@use 'node_modules/highlight.js/styles/github-dark.css';

$padding: 1em;

@font-face {
  font-family: "Mplus Code";
  src: url("../vendor/MPLUS_FONTS/fonts/ttf/MPLUSCodeLatin[wdth,wght].ttf") format("truetype");
}

body {
  background-color: #404040;
  margin: 0;
}

.unselectable {
  user-select: none;
}

hr {
  @extend .hljs;
  margin: $padding 0;
}

main {
  display: inline-flex;
  min-width: 100%;
  max-width: 100%;
  justify-content: center;
}

th {
  font-weight: normal;
}

.paste {
  @extend .hljs;
  border-radius: $padding;
  margin: $padding;
  padding: 2 * $padding;
  box-shadow: 0 0 $padding black;
  min-width: 120ch;
}

.hljs {
  font-family: 'Mplus Code', sans-serif;
}

.align-right {
  text-align: right;
}

.hljs-ln td.hljs-ln-numbers {
  @extend .align-right;
  padding-right: $padding;
}

.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fullscreen {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
}

.display-anyways {
  margin-top: 4em;
  text-decoration: underline;
  cursor: pointer;
}

img,
audio,
video {
  border-radius: $padding;
  margin-bottom: $padding;
  max-height: 75vh;
  max-width: 75vw;
}

textarea {
  @extend .paste;
  height: 75vh;
  border-color: white;
}

.primary {
  @extend .hljs;
}

.archive {
  &-table {
    width: 100%;
  }

  &-file-size {
    @extend .align-right;
    padding-left: $padding;
  }
}

.button {
  @extend .hljs;

  font-size: 16px;
  text-decoration: underline;
  border: none;

  &:hover {
    cursor: pointer;
  }
}

.file-upload {
  @extend .button;

  input {
    display: none;
  }
}

.text-upload {
  @extend .button;
}