/*
 * SPDX-FileCopyrightText: 2026 Mariano Pictet and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 *
 * The server's stylesheet, edited in Admin → Stylesheet. It loads after Idejo's own styles,
 * so its rules win. "Reset to default" brings back this text.
 *
 * Colours of the theme you can use: var(--color-base-100) (boxes), var(--color-base-200)
 * (the page), var(--color-base-content) (text), var(--color-primary), var(--color-accent).
 */

:root {
  /* Menus: the account menu, a topic's menu (right click or long press), the dropdowns,
     and any later one. */
  --menu-opacity: 70%;
  --menu-blur: 4px;

  /* Cards over the page (a user's card, moderation, the emoji picker, moving messages,
     dialogs) look like the menus; give them values of their own to set them apart. */
  --card-opacity: var(--menu-opacity);
  --card-blur: var(--menu-blur);

  /* Other overlays: the welcome card (Rules & Roles). */
  --overlay-opacity: 80%;
  --overlay-blur: 6px;

  /* !spoiler: the cover over a hidden message, and its Reveal button. */
  --spoiler-opacity: 50%;
  --spoiler-blur: 4px;
  --spoiler-button-opacity: 80%;
  --spoiler-button-blur: 6px;
}

/* Cards: see-through, blurring what is behind them. */
.modal-box {
  background: color-mix(in oklab, var(--color-base-100) var(--card-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
}

/* Menus: see-through, blurring what is behind them. Every menu has the class popup-menu. */
.popup-menu {
  background: color-mix(in oklab, var(--color-base-100) var(--menu-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--menu-blur));
  backdrop-filter: blur(var(--menu-blur));
}

/* Other overlays. */
.welcome-card {
  background: color-mix(in oklab, var(--color-base-100) var(--overlay-opacity), transparent);
  -webkit-backdrop-filter: blur(var(--overlay-blur));
  backdrop-filter: blur(var(--overlay-blur));
}