/*
 * Diabolic theme for Forgejo, like home.neptune.one and SearXNG: Diablo III's
 * own interface textures (../diabolic/d3/, cut from the 1.0.8 client's 2DUI
 * atlases) over Forgejo's dark theme. Boxes are item tooltips, their headers
 * the quality banner, buttons the Battle.net buttons, fields the login field,
 * the navbar the Battle.net header bar.
 *
 * Served at /assets/css/theme-diabolic.css, its art at /assets/diabolic/
 * (both mounted into the custom public folder, see docker-compose.yml).
 */
@import url("theme-forgejo-dark.css");

gitea-theme-meta-info {
  --theme-display-name: "Diabolic";
}

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Exocet";
  src: url("/assets/diabolic/fonts/exocet-medium.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/assets/diabolic/fonts/notosans-regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/assets/diabolic/fonts/notosans-bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/assets/diabolic/fonts/notosans-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

/* ---------- Palette ---------- */
/* Near-black like the tooltips, bone text, gold links, bronze lines */

:root {
  --dia-gold: #d8b36a;
  --dia-heading: "Exocet", "Noto Serif", serif;
  --dia-torch: 255 170 90;
  --fonts-override: "Noto Sans";

  --color-primary: #d8b36a;
  --color-primary-contrast: #0d0a09;
  --color-primary-hover: #e9c98a;
  --color-primary-active: #f0d59a;
  --color-primary-dark-1: #e0bd78;
  --color-primary-dark-2: #e8c88a;
  --color-primary-dark-3: #efd39c;
  --color-primary-dark-4: #f4ddae;
  --color-primary-dark-5: #f8e7c2;
  --color-primary-dark-6: #fbf0d6;
  --color-primary-dark-7: #fdf7ea;
  --color-primary-light-1: #c39f5c;
  --color-primary-light-2: #a9894f;
  --color-primary-light-3: #8f7343;
  --color-primary-light-4: #745d37;
  --color-primary-light-5: #59472a;
  --color-primary-light-6: #3f321e;
  --color-primary-light-7: #261e12;
  --color-primary-alpha-10: #d8b36a19;
  --color-primary-alpha-20: #d8b36a33;
  --color-primary-alpha-30: #d8b36a4b;
  --color-primary-alpha-40: #d8b36a66;
  --color-primary-alpha-50: #d8b36a80;
  --color-primary-alpha-60: #d8b36a99;
  --color-primary-alpha-70: #d8b36ab3;
  --color-primary-alpha-80: #d8b36acc;
  --color-primary-alpha-90: #d8b36ae1;
  --color-accent: #d4202c;
  --color-small-accent: #d8b36a;

  --color-secondary: #3a2c20;
  --color-secondary-bg: #1a130e;
  --color-secondary-dark-1: #45352a;
  --color-secondary-dark-2: #503f31;
  --color-secondary-dark-3: #5c4938;
  --color-secondary-dark-4: #6b5642;
  --color-secondary-dark-5: #7a644e;
  --color-secondary-dark-6: #8a735c;
  --color-secondary-dark-7: #99836b;
  --color-secondary-dark-8: #a8937c;
  --color-secondary-dark-9: #b6a38e;
  --color-secondary-dark-10: #c4b3a0;
  --color-secondary-dark-11: #d1c3b2;
  --color-secondary-dark-12: #ded3c5;
  --color-secondary-dark-13: #ebe3d8;
  --color-secondary-light-1: #2e2219;
  --color-secondary-light-2: #241a13;
  --color-secondary-light-3: #1a130e;
  --color-secondary-light-4: #120d09;
  --color-secondary-alpha-10: #3a2c2019;
  --color-secondary-alpha-20: #3a2c2033;
  --color-secondary-alpha-30: #3a2c204b;
  --color-secondary-alpha-40: #3a2c2066;
  --color-secondary-alpha-50: #3a2c2080;
  --color-secondary-alpha-60: #3a2c2099;
  --color-secondary-alpha-70: #3a2c20b3;
  --color-secondary-alpha-80: #3a2c20cc;
  --color-secondary-alpha-90: #3a2c20e1;
  --color-secondary-hover: #503f31;
  --color-secondary-active: #5c4938;

  --color-body: #0d0a09;
  --color-box-body: #050403;
  --color-box-body-highlight: #120d0a;
  --color-box-header: #120d0a;
  --color-text: #d9cfc1;
  --color-text-dark: #f2ead9;
  --color-text-light: #c4b6a3;
  --color-text-light-1: #ae9f8b;
  --color-text-light-2: #988873;
  --color-text-light-3: #82735f;
  --color-placeholder-text: #82735f;
  --color-nav-bg: #0b0807;
  --color-nav-hover-bg: #1d1510;
  --color-secondary-nav-bg: #0f0b09;
  --color-header-wrapper: #0f0b09;
  --color-footer: #0b0807;
  --color-menu: #0f0b09;
  --color-card: #0a0807;
  --color-button: #1a120d;
  --color-hover: #d8b36a14;
  --color-active: #d8b36a24;
  --color-input-background: #0f0b09;
  --color-input-border: #4a3a28;
  --color-input-border-hover: #6b5236;
  --color-input-text: #e6dccd;
  --color-light: #00000033;
  --color-light-border: #d8b36a1f;
  --color-markup-code-block: #120d0a;
  --color-markup-code-inline: #1d1510;
  --color-code-bg: #0b0807;
  --color-label-bg: #2a1f17;
  --color-label-text: #e6dccd;
  --color-tooltip-bg: #000;
  --color-tooltip-text: #e6dccd;
  --color-selection-bg: #d4202c;
  --color-selection-fg: #f0d59a;
  --color-timeline: #3a2c20;
}

/* ---------- Page ---------- */
/* Near-black with a red glow from the top, as on the other sites */

html,
body {
  background: var(--color-body) radial-gradient(ellipse at top, #2a0c0e 0%, transparent 60%) no-repeat fixed;
}

/* ---------- Navbar: the Battle.net header bar ---------- */
/* Its stone band behind the navbar, its demon crest and teeth hanging
   below it (d3/topbar.webp, BattleNetHeader_BG_4x3) */

#navbar {
  position: relative;
  z-index: 20;
  border-bottom: 0;
  background: #0b0807 url("/assets/diabolic/d3/topbar-tile.png") center top / auto 30px repeat-x;
  background-size: auto 100%;
}

#navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  bottom: -38px;
  height: 68px;
  background:
    url("/assets/diabolic/d3/topbar.webp") center bottom / auto 68px no-repeat,
    url("/assets/diabolic/d3/topbar-tile.png") center bottom / auto 68px repeat-x;
  pointer-events: none;
}

#navbar .item {
  color: var(--color-text-light);
}

#navbar .item:hover,
#navbar .item.active {
  color: var(--dia-gold);
  background: transparent;
}

.page-content {
  padding-top: 1.5rem;
}

/* ---------- Headings ---------- */

.repo-header .repo-title,
.ui.top.attached.header,
.ui.attached.header,
h4.ui.header,
.markup h1,
.markup h2,
.page-content > .ui.container > h1,
.page-content > .ui.container > h2 {
  font-family: var(--dia-heading);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.repo-header .repo-title,
.markup h1,
.markup h2 {
  color: var(--dia-gold);
  text-shadow: 0 1px 2px #000, 0 0 12px rgb(var(--dia-torch) / 30%);
}

.markup h1,
.markup h2 {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #6b5236, #d8b36a 30%, transparent) 1;
}

/* ---------- Boxes: item tooltips ---------- */
/* Segments are the tooltip's stone frame around its gold-lined body box
   (d3/box.png, 9-sliced at 80%); a box's header is the item name banner
   (d3/title-default.png, Frame_QualityColor_Default) */

.ui.segment,
.ui.attached.segment,
.ui.attached.table,
#repo-files-table {
  border: solid transparent !important;
  border-width: 19px 13px 18px !important;
  border-image: url("/assets/diabolic/d3/box.png") 24 16 23 fill / 19px 13px 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui.top.attached.header,
.ui.attached.header {
  border: solid transparent !important;
  border-width: 3px 0 !important;
  border-image: url("/assets/diabolic/d3/title-default.png") 4 190 fill / 3px 152px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dia-gold);
  text-shadow: 0 1px 2px #000;
  margin-bottom: 2px !important;
}

/* The table of files: its header row on the banner too */
#repo-files-table-commit,
#repo-files-table .repo-file-cell.name,
#repo-files-table .repo-file-item {
  border-color: #d8b36a1f !important;
}

/* ---------- Buttons: Battle.net buttons ---------- */
/* Primary actions red (BattleNetButton_Red*), the others dark
   (BattleNetButton_Clear*), 9-sliced at half size: the ornate ends 20px,
   the frame 7px */

.button:not(.basic, .label, .dropdown, .icon) {
  border: solid transparent !important;
  border-width: 7px 14px !important;
  border-image: url("/assets/diabolic/d3/btn-clear-up.png") 14 40 fill / 7px 20px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  text-shadow: 0 1px 2px #000;
}

.button:not(.basic, .label, .dropdown, .icon):hover {
  border-image-source: url("/assets/diabolic/d3/btn-clear-over.png") !important;
  color: var(--dia-gold) !important;
}

.button:not(.basic, .label, .dropdown, .icon):active {
  border-image-source: url("/assets/diabolic/d3/btn-clear-down.png") !important;
}

.primary.button:not(.basic),
.green.button:not(.basic),
.red.button:not(.basic) {
  border-image-source: url("/assets/diabolic/d3/btn-red-up.png") !important;
  color: #fff1d6 !important;
}

.primary.button:not(.basic):hover,
.green.button:not(.basic):hover,
.red.button:not(.basic):hover {
  border-image-source: url("/assets/diabolic/d3/btn-red-over.png") !important;
  color: #fff !important;
}

.primary.button:not(.basic):active,
.green.button:not(.basic):active,
.red.button:not(.basic):active {
  border-image-source: url("/assets/diabolic/d3/btn-red-down.png") !important;
}

/* ---------- Fields: the Battle.net login field ---------- */

.ui.input > input,
.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="hidden"]),
input.input {
  border: solid transparent !important;
  border-width: 6px 13px !important;
  border-image: url("/assets/diabolic/d3/input.png") 10 22 fill / 6px 13px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-input-text);
}

.ui.input > input:focus,
.ui.form input:focus {
  filter: drop-shadow(0 0 6px rgb(var(--dia-torch) / 35%));
}

.ui.form textarea,
textarea.markdown-text-editor {
  border: solid transparent !important;
  border-width: 19px 13px 18px !important;
  border-image: url("/assets/diabolic/d3/box.png") 24 16 23 fill / 19px 13px 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ---------- Menus and tabs ---------- */

.ui.menu,
.ui.dropdown .menu,
.ui.secondary.menu .dropdown.item > .menu {
  border-color: #3a2c20;
}

.ui.dropdown .menu,
.tippy-box {
  background: #050403 !important;
  border: 1px solid #6b5236 !important;
  box-shadow: 0 6px 18px rgb(0 0 0 / 80%) !important;
}

.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu > .item.selected {
  background: linear-gradient(90deg, rgb(110 10 16 / 85%), rgb(110 10 16 / 25%)) !important;
  color: #f0d59a !important;
}

/* The active tab: a blood-red bar, as on SearXNG */
.ui.secondary.pointing.menu .active.item,
.ui.tabular.menu .active.item {
  border-color: transparent !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #6e0a10, #d4202c 50%, #6e0a10) 1 !important;
  color: var(--dia-gold) !important;
  background: transparent !important;
}

.ui.secondary.pointing.menu .item,
.ui.tabular.menu .item {
  font-family: var(--dia-heading);
  letter-spacing: 0.05em;
}

/* ---------- Footer ---------- */

.page-footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, #3a2c20 25%, #6b5236 50%, #3a2c20 75%, transparent) 1;
  background: transparent;
  color: #7a6c5c;
}

::selection {
  background-color: #d4202c;
  color: #f0d59a;
}