/*
 * patate theme for Forgejo, based on patate.dev:
 * black starfield, translucent royal-blue panels (rgb(18,24,217)),
 * #686bff links, Courier headings.
 * Builds on the stock dark theme and only overrides colours, so it
 * keeps working when Forgejo changes its layout.
 */
@import "./theme-forgejo-dark.css";

:root {
  /* base greys -> deep navy */
  --steel-900: #04051a;
  --steel-850: #070924;
  --steel-800: #0a0c2e;
  --steel-750: #0f1240;
  --steel-700: #151954;
  --steel-650: #1c216a;
  --steel-600: #272e86;
  --steel-550: #353da0;
  --steel-500: #4850b8;
  --steel-450: #5f67cf;

  /* accent: patate.dev link blue */
  --color-primary: #686bff;
  --color-primary-contrast: #0a0c2e;
  --color-primary-dark-1: #7d80ff;
  --color-primary-dark-2: #8e91ff;
  --color-primary-dark-3: #a3a5ff;
  --color-primary-dark-4: #b9bdf0;
  --color-primary-dark-5: #cfd1f7;
  --color-primary-dark-6: #e3e4fb;
  --color-primary-dark-7: #f1f1fd;
  --color-primary-light-1: #5660f1;
  --color-primary-light-2: #4446dc;
  --color-primary-light-3: #3638bf;
  --color-primary-light-4: #2b2d9c;
  --color-primary-light-5: #22247a;
  --color-primary-light-6: #1a1c5c;
  --color-primary-light-7: #12143f;
  --color-primary-alpha-10: #5660f119;
  --color-primary-alpha-20: #5660f133;
  --color-primary-alpha-30: #5660f14b;
  --color-primary-alpha-40: #5660f166;
  --color-primary-alpha-50: #5660f180;
  --color-primary-alpha-60: #5660f199;
  --color-primary-alpha-70: #5660f1b3;
  --color-primary-alpha-80: #5660f1cc;
  --color-primary-alpha-90: #5660f1e1;

  /* translucent panels so the stars show through (menu_bg.png = 12,18,d9 @ 60%) */
  --color-nav-bg: rgba(18, 24, 217, 0.6);
  --color-header-wrapper: rgba(18, 24, 217, 0.6);
  --color-secondary-nav-bg: rgba(5, 7, 35, 0.8);
  --color-box-header: rgba(18, 24, 217, 0.45);
  --color-box-body: rgba(5, 7, 35, 0.86);
  --color-card: rgba(5, 7, 35, 0.86);
  --color-footer: rgba(5, 7, 35, 0.9);
}

/* the starfield, tiled like the website */
html,
body {
  /* slightly dimmed so the stars never fight with text */
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    #000 url("/assets/img/patate/bg.gif") repeat 0 0 !important;
}
.full.height,
.page-content {
  background: transparent !important;
}

/* menu: bold like the site */
#navbar .item,
#navbar a.item {
  font-weight: bold;
}

/* code boxes, as on the website: black, grey text, blue border */
pre,
.markup pre,
.markup code,
.markup tt {
  background: #000 !important;
  color: #ccc !important;
  border: 1px solid #686bff;
  font-family: "Courier New", Courier, monospace;
}
.code-view,
.file-view,
.diff-file-box {
  background: #000;
}

/* headings in Courier */
.markup h1,
.markup h2,
.repo-title,
.ui.header {
  font-family: "Courier New", Courier, monospace;
}

::selection {
  background: #1218d9;
  color: #fff;
}

/* ---------- homepage ---------- */
.patate-home {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 3rem;
}
.patate-hero {
  width: min(760px, 100%);
  background: rgba(18, 24, 217, 0.6);
  border: 1px solid rgba(104, 107, 255, 0.6);
  padding: 1.25rem 1.5rem 1.5rem;
  color: #fff;
}
.patate-hero .patate-banner {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.25rem;
  image-rendering: pixelated;
}
.patate-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.patate-row img.patate-spike {
  border: 3px solid rgba(18, 24, 217, 0.6);
  max-width: 100%;
  object-fit: cover;
}
.patate-hero h1 {
  font-family: "Courier New", Courier, monospace;
  font-size: 2rem;
  margin: 0 0 0.25rem;
  color: #fff;
}
.patate-hero h2 {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.1rem;
  font-weight: normal;
  margin: 0;
  color: #b9bdf0;
}
.patate-hero p {
  font-size: 1.1rem;
  margin: 1.25rem 0 0;
}
.patate-links {
  margin-top: 1.25rem;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.patate-links a {
  color: #8e91ff;
}
.patate-links a:hover {
  color: #cfd1f7;
}