depot/web/fup/fupstatic/css/base.css

/*
 * SPDX-FileCopyrightText: 2021 Luke Granger-Brown <depot@lukegb.com>
 *
 * SPDX-License-Identifier: Apache-2.0
 */

html {
  --colour-primary: #32681d;
  --colour-primary-light: #619648;
  --colour-primary-dark: #003d00;

  --colour-text-primary: #ffffff;
  --colour-text-primary-dark: #ffffff;
  --colour-text-primary-light: #000000;

  --colour-secondary: #cddc39;
  --colour-secondary-light: #ffff6e;
  --colour-secondary-dark: #99aa00;

  --colour-text-secondary: #424242;
  --colour-text-secondary-dark: #424242;
  --colour-text-secondary-light: #424242;

  --colour-canvas: #e1e2e1;
  --colour-canvas-light: #f5f5f6;
  --colour-text: #424242;
}

html {
  color: var(--colour-text);
  background: var(--colour-canvas);
  font-family: "Roboto Sans", sans-serif;
}

body:not(.has-js) .with-js, body.has-js .no-js {
  display: none;
}

body {
  max-width: 800px;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid var(--colour-primary-dark);
  display: flex;
  align-items: center;
}

header > h1 {
  flex-grow: 1;
}

header > h1 > a, header > h1 > a:visited {
  color: var(--colour-text);
  text-decoration: none;
}

nav a:after {
  display: inline;
  content: "|";
  padding-left: 0.3em;
  opacity: 0.6;
}

nav a:last-of-type:after {
  display: none;
}

a {
  color: var(--colour-primary);
}

a:visited {
  color: var(--colour-primary-dark);
}

header, .container {
  padding: 10px 30px;
}

h1 {
  font-family: "Roboto Mono", monospace;
}

.dropbox {
  background: var(--colour-canvas-light);
  height: 10rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
}

.upload-list {
  padding: 0;
}

.upload-list-element {
  position: relative;
  display: block;
  border: 1px solid var(--colour-primary-dark);
  margin-top: 0.4rem;
  padding: 0 10px;

  background: var(--colour-primary-light);
}

.upload-list-element, .upload-list-element a, .upload-list-element a:visited {
  color: var(--colour-text-primary-light);
}

.upload-list-bar {
  overflow: hidden;
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--colour-primary-dark);
  height: calc(100% + 2px);
  width: 0;
}

.upload-list-bar-container {
  padding: 1px 10px;
  white-space: nowrap;
}

.upload-list-bar, .upload-list-bar a, .upload-list-bar a:visited {
  color: var(--colour-text-primary-dark);
}

.uploaded {
  background: var(--colour-primary-dark);
}
.uploaded a, .uploaded a:visited {
  color: var(--colour-text-primary-dark);
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.meta {
  text-align: right;
  padding: 5px 0;
}

.container > pre {
  margin-top: 0;
}

.expanded-border .container {
  padding: 0;
}
.expanded-border .container > pre {
  padding: 10px 30px;
}

.binary-page .container h2 {
  text-align: center;
}

.paste-header {
  display: flex;
}
.paste-header-left {
  flex-grow: 1;
}

.paste-content {
  margin-top: 20px;
  width: 100%;
  min-height: 300px;
  font-family: "Roboto Mono", monospace;
}