Add 2026-dark theme and set as default
This commit is contained in:
parent
88bc0d1a2b
commit
9eea6550ad
5 changed files with 652 additions and 12 deletions
11
README.md
11
README.md
|
|
@ -20,7 +20,8 @@ GitHub/GitLab-style logged-out homepage.
|
|||
|
||||
| Theme | Notes |
|
||||
| --- | --- |
|
||||
| `aurora-light` | **Default.** Soft slate base, blue primary, teal links |
|
||||
| `2026-dark` | **Default.** Obsidian-midnight dark with electric cyan, emerald-teal, violet & coral accents, crisp 1px specular borders, and ambient glow (inspired by Omarchy, JetBrains, GitHub, GitLab, CachyOS, Hack Club & Lovable) |
|
||||
| `aurora-light` | Soft slate base, blue primary, teal links |
|
||||
| `aurora-dark` | Neutral-charcoal dark variant |
|
||||
| `gruvbox-dark` / `gruvbox-light` | Gruvbox palette with the soft-UI layer |
|
||||
| `gruvbox-soft-dark` | Legacy alias for `gruvbox-dark` |
|
||||
|
|
@ -48,8 +49,8 @@ upgrade Forgejo and want the newer built-in palettes.
|
|||
|
||||
```ini
|
||||
[ui]
|
||||
THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal
|
||||
DEFAULT_THEME = aurora-light
|
||||
THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal
|
||||
DEFAULT_THEME = 2026-dark
|
||||
```
|
||||
|
||||
3. Hard-refresh the browser (`Ctrl+Shift+R`). Forgejo serves custom CSS with a
|
||||
|
|
@ -59,8 +60,8 @@ upgrade Forgejo and want the newer built-in palettes.
|
|||
## Navbar dark/light toggle
|
||||
|
||||
`templates/custom/header.tmpl` injects a neumorphic sun/moon switch into the
|
||||
navbar (left of *Register* when logged out). It flips between `aurora-light`
|
||||
and `aurora-dark`, stores the choice in `localStorage` under `dxd-theme`, and
|
||||
navbar (left of *Register* when logged out). It flips between `2026-dark`
|
||||
and `aurora-light`, stores the choice in `localStorage` under `dxd-theme-2026`, and
|
||||
applies it before the page paints.
|
||||
|
||||
## Security / no secrets
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
|
||||
[ui]
|
||||
APP_NAME = GitDXD
|
||||
THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal
|
||||
DEFAULT_THEME = aurora-light
|
||||
THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal
|
||||
DEFAULT_THEME = 2026-dark
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ echo
|
|||
echo "Next, add this to app.ini and restart Forgejo:"
|
||||
echo
|
||||
echo " [ui]"
|
||||
echo " THEMES = forgejo-auto,forgejo-light,forgejo-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal"
|
||||
echo " DEFAULT_THEME = aurora-light"
|
||||
echo " THEMES = forgejo-auto,forgejo-light,forgejo-dark,2026-dark,aurora-dark,aurora-light,gruvbox-dark,gruvbox-light,gruvbox-soft-dark,terminal"
|
||||
echo " DEFAULT_THEME = 2026-dark"
|
||||
echo
|
||||
echo "Then hard-refresh the browser (Ctrl+Shift+R)."
|
||||
|
|
|
|||
|
|
@ -69,8 +69,8 @@
|
|||
(function () {
|
||||
"use strict";
|
||||
var LIGHT = "aurora-light";
|
||||
var DARK = "aurora-dark";
|
||||
var KEY = "dxd-theme";
|
||||
var DARK = "2026-dark";
|
||||
var KEY = "dxd-theme-2026";
|
||||
|
||||
function themeLink() {
|
||||
return document.querySelector('link[rel="stylesheet"][href*="/css/theme-"]');
|
||||
|
|
@ -87,12 +87,13 @@
|
|||
|
||||
function mode() {
|
||||
var link = themeLink();
|
||||
if (!link) return "light";
|
||||
if (!link) return "dark";
|
||||
return /-light\.css/.test(link.getAttribute("href")) ? "light" : "dark";
|
||||
}
|
||||
|
||||
/* Apply the saved preference before the page paints, so there is no flash. */
|
||||
try {
|
||||
localStorage.removeItem("dxd-theme");
|
||||
var saved = localStorage.getItem(KEY);
|
||||
if (saved === "dark") apply(DARK);
|
||||
else if (saved === "light") apply(LIGHT);
|
||||
|
|
|
|||
638
themes/theme-2026-dark.css
Normal file
638
themes/theme-2026-dark.css
Normal file
|
|
@ -0,0 +1,638 @@
|
|||
/*
|
||||
* theme-2026-dark.css ("2026 dark")
|
||||
* ─────────────────────────────────────────────────────────────────────────
|
||||
* Default theme for GitDXD (2026).
|
||||
*
|
||||
* Inspired by:
|
||||
* • Omarchy — deep obsidian-midnight ink, crisp 1px hairlines, TUI clarity
|
||||
* • CachyOS — electric cyan (#38bdf8) & emerald-teal (#2dd4bf) aurora glow
|
||||
* • JetBrains — high-contrast dark surfaces, multi-stop electric gradients,
|
||||
* and crisp JetBrains Mono code typography
|
||||
* • GitHub/GitLab — clean Primer/Pajamas dark hierarchy, readable diffs & pills
|
||||
* • Hack Club — vibrant coral-rose (#fb7185 / #ec3750) & warm amber accents
|
||||
* • Lovable — 2026 Bento card elevation, top-edge specular rim, ambient glow
|
||||
*/
|
||||
|
||||
@import url("./_base-forgejo-dark.css");
|
||||
@import url("./theme-neumorphism.css");
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--is-dark-theme: true;
|
||||
|
||||
/* ── Typography ─────────────────────────────────────────────────── */
|
||||
--fonts-proportional: "Inter", "Geist", "SF Pro Text", -apple-system,
|
||||
"Segoe UI", "Noto Sans", system-ui, sans-serif !important;
|
||||
--fonts-monospace: "JetBrains Mono", "Berkeley Mono", "Cascadia Code",
|
||||
"Fira Code", "SF Mono", "Source Code Pro", ui-monospace,
|
||||
"DejaVu Sans Mono", Consolas, monospace !important;
|
||||
|
||||
/* ── Obsidian & midnight-slate neutral ramp (dark → light) ──────── */
|
||||
--steel-900: #080a0f;
|
||||
--steel-850: #0b0d13;
|
||||
--steel-800: #0d1017;
|
||||
--steel-750: #111520;
|
||||
--steel-700: #151a27;
|
||||
--steel-650: #1b2232;
|
||||
--steel-600: #232c40;
|
||||
--steel-550: #2f3b54;
|
||||
--steel-500: #4b5975;
|
||||
--steel-450: #697896;
|
||||
--steel-400: #8b9bb8;
|
||||
--steel-350: #a8b6cf;
|
||||
--steel-300: #c0cce0;
|
||||
--steel-250: #d5dfed;
|
||||
--steel-200: #e2e8f0;
|
||||
--steel-150: #edf2f7;
|
||||
--steel-100: #f8fafc;
|
||||
|
||||
/* ── Primary: Electric Cyan-Blue (CachyOS / JetBrains / GitHub) ─── */
|
||||
--color-primary: #38bdf8;
|
||||
--color-primary-contrast: #060911;
|
||||
--color-primary-dark-1: #7dd3fc;
|
||||
--color-primary-dark-2: #7dd3fc;
|
||||
--color-primary-dark-3: #bae6fd;
|
||||
--color-primary-dark-4: #bae6fd;
|
||||
--color-primary-dark-5: #e0f2fe;
|
||||
--color-primary-dark-6: #e0f2fe;
|
||||
--color-primary-dark-7: #f0f9ff;
|
||||
--color-primary-light-1: #0ea5e9;
|
||||
--color-primary-light-2: #0284c7;
|
||||
--color-primary-light-3: #2563eb;
|
||||
--color-primary-light-4: #1d4ed8;
|
||||
--color-primary-light-5: #1e40af;
|
||||
--color-primary-light-6: #1e3a8a;
|
||||
--color-primary-light-7: #172554;
|
||||
--color-primary-alpha-10: rgba(56, 189, 248, 0.10);
|
||||
--color-primary-alpha-20: rgba(56, 189, 248, 0.20);
|
||||
--color-primary-alpha-30: rgba(56, 189, 248, 0.30);
|
||||
--color-primary-alpha-40: rgba(56, 189, 248, 0.40);
|
||||
--color-primary-alpha-50: rgba(56, 189, 248, 0.50);
|
||||
--color-primary-alpha-60: rgba(56, 189, 248, 0.60);
|
||||
--color-primary-alpha-70: rgba(56, 189, 248, 0.70);
|
||||
--color-primary-alpha-80: rgba(56, 189, 248, 0.80);
|
||||
--color-primary-alpha-90: rgba(56, 189, 248, 0.90);
|
||||
--color-primary-hover: #7dd3fc;
|
||||
--color-primary-active: #0ea5e9;
|
||||
|
||||
/* ── Secondary (Midnight Slate) ─────────────────────────────────── */
|
||||
--color-secondary: #1b2232;
|
||||
--color-secondary-dark-1: #2f3b54;
|
||||
--color-secondary-dark-2: #4b5975;
|
||||
--color-secondary-dark-3: #697896;
|
||||
--color-secondary-dark-4: #8b9bb8;
|
||||
--color-secondary-dark-5: #a8b6cf;
|
||||
--color-secondary-dark-6: #c0cce0;
|
||||
--color-secondary-dark-7: #d5dfed;
|
||||
--color-secondary-dark-8: #e2e8f0;
|
||||
--color-secondary-dark-9: #edf2f7;
|
||||
--color-secondary-dark-10: #f8fafc;
|
||||
--color-secondary-dark-11: #f8fafc;
|
||||
--color-secondary-dark-12: #ffffff;
|
||||
--color-secondary-dark-13: #ffffff;
|
||||
--color-secondary-light-1: #232c40;
|
||||
--color-secondary-light-2: #151a27;
|
||||
--color-secondary-light-3: #111520;
|
||||
--color-secondary-light-4: #0d1017;
|
||||
--color-secondary-alpha-10: rgba(27, 34, 50, 0.10);
|
||||
--color-secondary-alpha-20: rgba(27, 34, 50, 0.20);
|
||||
--color-secondary-alpha-30: rgba(27, 34, 50, 0.30);
|
||||
--color-secondary-alpha-40: rgba(27, 34, 50, 0.40);
|
||||
--color-secondary-alpha-50: rgba(27, 34, 50, 0.50);
|
||||
--color-secondary-alpha-60: rgba(27, 34, 50, 0.60);
|
||||
--color-secondary-alpha-70: rgba(27, 34, 50, 0.70);
|
||||
--color-secondary-alpha-80: rgba(27, 34, 50, 0.80);
|
||||
--color-secondary-alpha-90: rgba(27, 34, 50, 0.90);
|
||||
--color-secondary-hover: #232c40;
|
||||
--color-secondary-active: #2f3b54;
|
||||
|
||||
/* ── Named Accents: Cyan, Violet, Coral (Hack Club), Emerald ────── */
|
||||
--color-red: #fb7185;
|
||||
--color-orange: #fb923c;
|
||||
--color-yellow: #fbbf24;
|
||||
--color-olive: #a3e635;
|
||||
--color-green: #34d399;
|
||||
--color-teal: #2dd4bf;
|
||||
--color-blue: #38bdf8;
|
||||
--color-violet: #818cf8;
|
||||
--color-purple: #a78bfa;
|
||||
--color-pink: #f472b6;
|
||||
--color-brown: #d6a27c;
|
||||
--color-grey: #8b9bb8;
|
||||
--color-black: #111520;
|
||||
|
||||
--color-red-light: #fda4af;
|
||||
--color-orange-light: #fdba74;
|
||||
--color-yellow-light: #fde047;
|
||||
--color-olive-light: #bef264;
|
||||
--color-green-light: #6ee7b7;
|
||||
--color-teal-light: #5eead4;
|
||||
--color-blue-light: #7dd3fc;
|
||||
--color-violet-light: #a5b4fc;
|
||||
--color-purple-light: #c4b5fd;
|
||||
--color-pink-light: #f9a8d4;
|
||||
--color-brown-light: #e5bfa3;
|
||||
--color-grey-light: #cbd5e1;
|
||||
--color-black-light: #1b2232;
|
||||
|
||||
--color-red-dark-1: #ec3750;
|
||||
--color-orange-dark-1: #f97316;
|
||||
--color-yellow-dark-1: #f59e0b;
|
||||
--color-olive-dark-1: #65a30d;
|
||||
--color-green-dark-1: #10b981;
|
||||
--color-teal-dark-1: #14b8a6;
|
||||
--color-blue-dark-1: #0ea5e9;
|
||||
--color-violet-dark-1: #6366f1;
|
||||
--color-purple-dark-1: #8b5cf6;
|
||||
--color-pink-dark-1: #ec4899;
|
||||
--color-brown-dark-1: #b07d56;
|
||||
--color-grey-dark-1: #64748b;
|
||||
--color-black-dark-1: #080a0f;
|
||||
|
||||
--color-red-dark-2: #be123c;
|
||||
--color-orange-dark-2: #c2410c;
|
||||
--color-yellow-dark-2: #b45309;
|
||||
--color-olive-dark-2: #4d7c0f;
|
||||
--color-green-dark-2: #059669;
|
||||
--color-teal-dark-2: #0d9488;
|
||||
--color-blue-dark-2: #0284c7;
|
||||
--color-violet-dark-2: #4f46e5;
|
||||
--color-purple-dark-2: #7c3aed;
|
||||
--color-pink-dark-2: #be185d;
|
||||
--color-brown-dark-2: #8c5e3c;
|
||||
--color-grey-dark-2: #475569;
|
||||
--color-black-dark-2: #05070b;
|
||||
|
||||
--color-gold: #fbbf24;
|
||||
--color-white: #f8fafc;
|
||||
--color-pure-black: #05070b;
|
||||
|
||||
/* ── ANSI (Omarchy Tokyo-Night + CachyOS Terminal) ──────────────── */
|
||||
--color-ansi-black: #111520;
|
||||
--color-ansi-red: #ec3750;
|
||||
--color-ansi-green: #10b981;
|
||||
--color-ansi-yellow: #f59e0b;
|
||||
--color-ansi-blue: #3b82f6;
|
||||
--color-ansi-magenta: #8b5cf6;
|
||||
--color-ansi-cyan: #06b6d4;
|
||||
--color-ansi-white: #a8b6cf;
|
||||
--color-ansi-bright-black: #4b5975;
|
||||
--color-ansi-bright-red: #fb7185;
|
||||
--color-ansi-bright-green: #34d399;
|
||||
--color-ansi-bright-yellow: #fbbf24;
|
||||
--color-ansi-bright-blue: #38bdf8;
|
||||
--color-ansi-bright-magenta: #a78bfa;
|
||||
--color-ansi-bright-cyan: #2dd4bf;
|
||||
--color-ansi-bright-white: #f8fafc;
|
||||
|
||||
/* ── Diffs (GitHub/GitLab 2026 high-clarity emerald & coral) ────── */
|
||||
--color-diff-removed-word-bg: rgba(251, 113, 133, 0.30);
|
||||
--color-diff-added-word-bg: rgba(52, 211, 153, 0.26);
|
||||
--color-diff-removed-row-bg: rgba(236, 55, 80, 0.11);
|
||||
--color-diff-moved-row-bg: rgba(251, 191, 36, 0.12);
|
||||
--color-diff-added-row-bg: rgba(16, 185, 129, 0.11);
|
||||
--color-diff-removed-row-border: rgba(251, 113, 133, 0.42);
|
||||
--color-diff-moved-row-border: rgba(251, 191, 36, 0.42);
|
||||
--color-diff-added-row-border: rgba(52, 211, 153, 0.42);
|
||||
--color-diff-inactive: #111520;
|
||||
|
||||
/* ── Status Alerts ──────────────────────────────────────────────── */
|
||||
--color-error-border: rgba(251, 113, 133, 0.45);
|
||||
--color-error-bg: rgba(159, 18, 57, 0.24);
|
||||
--color-error-bg-active: rgba(190, 18, 60, 0.34);
|
||||
--color-error-bg-hover: rgba(190, 18, 60, 0.30);
|
||||
--color-error-text: #fda4af;
|
||||
--color-success-border: rgba(52, 211, 153, 0.45);
|
||||
--color-success-bg: rgba(6, 95, 70, 0.26);
|
||||
--color-success-text: #6ee7b7;
|
||||
--color-warning-border: rgba(251, 191, 36, 0.45);
|
||||
--color-warning-bg: rgba(146, 64, 14, 0.26);
|
||||
--color-warning-text: #fde047;
|
||||
--color-info-border: rgba(56, 189, 248, 0.45);
|
||||
--color-info-bg: rgba(3, 105, 161, 0.24);
|
||||
--color-info-text: #bae6fd;
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────── */
|
||||
--color-red-badge: #fb7185;
|
||||
--color-red-badge-bg: rgba(251, 113, 133, 0.14);
|
||||
--color-red-badge-hover-bg: rgba(251, 113, 133, 0.26);
|
||||
--color-green-badge: #34d399;
|
||||
--color-green-badge-bg: rgba(52, 211, 153, 0.14);
|
||||
--color-green-badge-hover-bg: rgba(52, 211, 153, 0.26);
|
||||
--color-yellow-badge: #fbbf24;
|
||||
--color-yellow-badge-bg: rgba(251, 191, 36, 0.14);
|
||||
--color-yellow-badge-hover-bg: rgba(251, 191, 36, 0.26);
|
||||
--color-orange-badge: #fb923c;
|
||||
--color-orange-badge-bg: rgba(251, 146, 60, 0.14);
|
||||
--color-orange-badge-hover-bg: rgba(251, 146, 60, 0.26);
|
||||
|
||||
/* ── Thin accents / danger ──────────────────────────────────────── */
|
||||
--color-thin-green: #34d399;
|
||||
--color-thin-red: #fb7185;
|
||||
--color-thin-purple: #a78bfa;
|
||||
--color-thin-orange: #fb923c;
|
||||
--color-thin-red-highlight: #fda4af;
|
||||
--color-danger-bg: rgba(159, 18, 57, 0.25);
|
||||
|
||||
/* ── Surfaces (Obsidian Bento Hierarchy) ────────────────────────── */
|
||||
--color-body: #0b0d13;
|
||||
--color-box-header: #131824;
|
||||
--color-box-body: #111520;
|
||||
--color-box-body-highlight: #181f2e;
|
||||
--color-text-dark: #05070b;
|
||||
--color-text: #e2e8f0;
|
||||
--color-text-light: #cbd5e1;
|
||||
--color-text-light-1: #b8c4d9;
|
||||
--color-text-light-2: #94a3b8;
|
||||
--color-text-light-3: #64748b;
|
||||
--color-footer: #080a0f;
|
||||
--color-timeline: #1e2638;
|
||||
--color-input-text: #f1f5f9;
|
||||
--color-input-background: #080a10;
|
||||
--color-input-toggle-background: #1b2232;
|
||||
--color-input-border: rgba(148, 163, 184, 0.18);
|
||||
--color-input-border-hover: rgba(56, 189, 248, 0.45);
|
||||
--color-header-wrapper: #080a0f;
|
||||
--color-header-wrapper-transparent: rgba(8, 10, 15, 0);
|
||||
--color-light: rgba(0, 0, 0, 0.35);
|
||||
--color-light-border: rgba(148, 163, 184, 0.12);
|
||||
--color-hover: #181f2e;
|
||||
--color-active: #1f293d;
|
||||
--color-menu: #111520;
|
||||
--color-card: #111520;
|
||||
--fancy-card-bg: #111520;
|
||||
--fancy-card-border: rgba(148, 163, 184, 0.14);
|
||||
--color-markup-table-row: rgba(255, 255, 255, 0.025);
|
||||
--color-markup-code-block: #080a10;
|
||||
--color-markup-code-inline: #161c2a;
|
||||
--color-button: #151b28;
|
||||
--color-code-bg: #080a10;
|
||||
--color-shadow: rgba(0, 0, 0, 0.65);
|
||||
--color-secondary-bg: #111520;
|
||||
--color-text-focus: #f8fafc;
|
||||
--color-expand-button: #1b2232;
|
||||
--color-placeholder-text: #52607a;
|
||||
--color-editor-line-highlight: rgba(56, 189, 248, 0.08);
|
||||
--color-project-board-bg: #111520;
|
||||
--color-project-board-dark-label: #8b9bb8;
|
||||
--color-caret: #38bdf8;
|
||||
--color-reaction-bg: rgba(56, 189, 248, 0.08);
|
||||
--color-reaction-active-bg: rgba(56, 189, 248, 0.20);
|
||||
--color-reaction-hover-bg: rgba(56, 189, 248, 0.30);
|
||||
--color-tooltip-text: #f8fafc;
|
||||
--color-tooltip-bg: #06080d;
|
||||
--color-nav-bg: rgba(8, 10, 15, 0.84);
|
||||
--color-nav-hover-bg: #181f2e;
|
||||
--color-secondary-nav-bg: #0b0d13;
|
||||
--color-label-text: #e2e8f0;
|
||||
--color-label-bg: #1b2232;
|
||||
--color-label-hover-bg: #252f45;
|
||||
--color-label-active-bg: #2f3b54;
|
||||
--color-label-bg-alt: #232c40;
|
||||
--color-accent: #38bdf8;
|
||||
--color-small-accent: #2dd4bf;
|
||||
--color-highlight-fg: #7dd3fc;
|
||||
--color-highlight-bg: rgba(56, 189, 248, 0.16);
|
||||
--color-overlay-backdrop: rgba(5, 7, 11, 0.82);
|
||||
--color-selection-bg: rgba(56, 189, 248, 0.28);
|
||||
--color-selection-fg: #f8fafc;
|
||||
--checkerboard-color-1: #151a27;
|
||||
--checkerboard-color-2: #0b0d13;
|
||||
--color-indicator-offline: #64748b;
|
||||
--color-indicator-offline-20: rgba(100, 116, 139, 0.20);
|
||||
--color-indicator-idle: #34d399;
|
||||
--color-indicator-idle-20: rgba(52, 211, 153, 0.20);
|
||||
--color-indicator-active: #38bdf8;
|
||||
--color-indicator-active-20: rgba(56, 189, 248, 0.20);
|
||||
|
||||
/* ── Console ────────────────────────────────────────────────────── */
|
||||
--color-console-fg: #e2e8f0;
|
||||
--color-console-fg-subtle: #8b9bb8;
|
||||
--color-console-bg: #06080d;
|
||||
--color-console-border: rgba(148, 163, 184, 0.14);
|
||||
--color-console-hover-bg: rgba(56, 189, 248, 0.08);
|
||||
--color-console-active-bg: #1b2232;
|
||||
--color-console-menu-bg: #111520;
|
||||
--color-console-menu-border: rgba(148, 163, 184, 0.20);
|
||||
|
||||
/* ── 2026 Bento / Specular 1px Borders + Elevation (replaces heavy neumorphism) ── */
|
||||
--nm-radius: 12px;
|
||||
--nm-radius-sm: 8px;
|
||||
--nm-shadow-dark: rgba(0, 0, 0, 0.65);
|
||||
--nm-shadow-light: rgba(255, 255, 255, 0.06);
|
||||
--nm-divider-color: rgba(148, 163, 184, 0.12);
|
||||
--nm-divider: rgba(148, 163, 184, 0.12);
|
||||
--nm-raised: 0 0 0 1px rgba(148, 163, 184, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 12px 32px -10px rgba(0, 0, 0, 0.70);
|
||||
--nm-raised-sm: 0 0 0 1px rgba(148, 163, 184, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07),
|
||||
0 4px 14px -3px rgba(0, 0, 0, 0.55);
|
||||
--nm-raised-xs: 0 0 0 1px rgba(148, 163, 184, 0.14),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
--nm-inset: inset 0 0 0 1px rgba(148, 163, 184, 0.14),
|
||||
inset 0 2px 6px rgba(0, 0, 0, 0.55);
|
||||
--nm-inset-sm: inset 0 0 0 1px rgba(148, 163, 184, 0.15),
|
||||
inset 0 1px 3px rgba(0, 0, 0, 0.45);
|
||||
--nm-flat: 0 0 0 1px rgba(148, 163, 184, 0.14);
|
||||
|
||||
/* ── 2026 Signature Gradients & Glows ───────────────────────────── */
|
||||
--dxd-2026-grad-primary: linear-gradient(
|
||||
135deg,
|
||||
#38bdf8 0%,
|
||||
#0ea5e9 48%,
|
||||
#6366f1 100%
|
||||
);
|
||||
--dxd-2026-grad-text: linear-gradient(
|
||||
120deg,
|
||||
#38bdf8 0%,
|
||||
#2dd4bf 38%,
|
||||
#a78bfa 72%,
|
||||
#fb7185 100%
|
||||
);
|
||||
--dxd-2026-glow-cyan: 0 0 24px -4px rgba(56, 189, 248, 0.35);
|
||||
--dxd-2026-glow-card: 0 0 0 1px rgba(56, 189, 248, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.10),
|
||||
0 14px 34px -10px rgba(0, 0, 0, 0.78),
|
||||
0 0 26px -6px rgba(56, 189, 248, 0.18);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
2026 Dark — Base Canvas & Ambient Aurora
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
body {
|
||||
background-color: #0b0d13 !important;
|
||||
background-image:
|
||||
radial-gradient(ellipse 65% 42% at 18% -8%, rgba(56, 189, 248, 0.08), transparent 70%),
|
||||
radial-gradient(ellipse 55% 38% at 82% -6%, rgba(139, 92, 246, 0.07), transparent 70%),
|
||||
radial-gradient(ellipse 45% 32% at 50% 104%, rgba(251, 113, 133, 0.04), transparent 70%) !important;
|
||||
background-attachment: fixed !important;
|
||||
color: #e2e8f0 !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ── Links: Emerald-Teal & Electric Sky (CachyOS / Omarchy) ───────── */
|
||||
a {
|
||||
color: #38bdf8 !important;
|
||||
text-decoration: none !important;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #5eead4 !important;
|
||||
text-decoration: underline !important;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.text.grey a,
|
||||
.meta a,
|
||||
.commit-header a,
|
||||
.breadcrumb a,
|
||||
.ui.breadcrumb a,
|
||||
.sha,
|
||||
.commit-sha {
|
||||
color: #8b9bb8 !important;
|
||||
}
|
||||
.text.grey a:hover,
|
||||
.meta a:hover,
|
||||
.commit-header a:hover,
|
||||
.breadcrumb a:hover,
|
||||
.ui.breadcrumb a:hover {
|
||||
color: #38bdf8 !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(56, 189, 248, 0.28);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.sha,
|
||||
.commit-sha,
|
||||
.commit-id-short,
|
||||
.version,
|
||||
.ui.label.sha {
|
||||
font-family: var(--fonts-monospace) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Navbar & Footer — Frosted Glass + Hairline Shimmer
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.navbar,
|
||||
#navbar,
|
||||
nav.navbar,
|
||||
.ui.menu.navbar,
|
||||
.ui.secondary.menu.navbar {
|
||||
background: rgba(8, 10, 15, 0.82) !important;
|
||||
backdrop-filter: blur(16px) saturate(160%) !important;
|
||||
-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
|
||||
box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
|
||||
.navbar .brand,
|
||||
.navbar .brand:hover {
|
||||
color: #f8fafc !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.page-footer,
|
||||
footer,
|
||||
.ui.page-footer {
|
||||
background: rgba(8, 10, 15, 0.90) !important;
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
2026 Bento Cards, Buttons, Tabs & Inputs
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.ui.card:hover,
|
||||
.ui.cards > .card:hover,
|
||||
.dxd-feature:hover {
|
||||
box-shadow: var(--dxd-2026-glow-card) !important;
|
||||
}
|
||||
|
||||
/* Primary CTA button: Electric cyan → blue → indigo gradient + inner rim */
|
||||
.ui.primary.button,
|
||||
.ui.primary.buttons .button,
|
||||
.ui.primary.label {
|
||||
background: var(--dxd-2026-grad-primary) !important;
|
||||
color: #04070f !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.40),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.32),
|
||||
0 4px 16px -3px rgba(14, 165, 233, 0.38) !important;
|
||||
}
|
||||
.ui.primary.button:hover,
|
||||
.ui.primary.buttons .button:hover {
|
||||
filter: brightness(1.08);
|
||||
color: #04070f !important;
|
||||
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.65),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42),
|
||||
0 6px 22px -2px rgba(56, 189, 248, 0.52) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Secondary / default buttons: crisp dark surface + cyan border glow on hover */
|
||||
.ui.button:not(.primary):not(.basic):hover,
|
||||
.ui.buttons .button:not(.primary):not(.basic):hover {
|
||||
background: #181f2e !important;
|
||||
color: #7dd3fc !important;
|
||||
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.38),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 4px 14px -3px rgba(0, 0, 0, 0.6) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Ghost / basic buttons */
|
||||
.ui.basic.button,
|
||||
.ui.basic.buttons .button {
|
||||
background: rgba(17, 21, 32, 0.55) !important;
|
||||
color: #cbd5e1 !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
.ui.basic.button:hover,
|
||||
.ui.basic.buttons .button:hover {
|
||||
background: rgba(56, 189, 248, 0.08) !important;
|
||||
color: #7dd3fc !important;
|
||||
border-color: rgba(56, 189, 248, 0.45) !important;
|
||||
box-shadow: var(--dxd-2026-glow-cyan) !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Inputs & editors: recessed obsidian terminal well + glowing focus ring */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.ui.input input,
|
||||
.ui.form input:not([type="checkbox"]):not([type="radio"]),
|
||||
.ui.form textarea,
|
||||
.ui.form select,
|
||||
.ui.search input,
|
||||
.CodeMirror {
|
||||
background: #080a10 !important;
|
||||
}
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.ui.input input:focus,
|
||||
.ui.form input:focus,
|
||||
.ui.form textarea:focus,
|
||||
.ui.search input:focus,
|
||||
.ui.action.input:focus-within {
|
||||
box-shadow: inset 0 0 0 1px #38bdf8,
|
||||
0 0 0 3px rgba(56, 189, 248, 0.20) !important;
|
||||
}
|
||||
|
||||
/* Active tabs: crisp electric accent bar */
|
||||
.ui.tabular.menu .active.item,
|
||||
.ui.secondary.pointing.menu .active.item {
|
||||
color: #f8fafc !important;
|
||||
border-bottom: 2px solid #38bdf8 !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Landing Page (home.tmpl) — 2026 Hero & Bento Polish
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.dxd-landing .dxd-eyebrow {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(56, 189, 248, 0.12),
|
||||
rgba(139, 92, 246, 0.12)
|
||||
) !important;
|
||||
color: #7dd3fc !important;
|
||||
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dxd-landing .dxd-hero h1 em {
|
||||
background: var(--dxd-2026-grad-text);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.dxd-landing .dxd-mock {
|
||||
background: linear-gradient(180deg, #131824 0%, #0e121b 100%) !important;
|
||||
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 24px 48px -12px rgba(0, 0, 0, 0.75),
|
||||
0 0 40px -10px rgba(56, 189, 248, 0.12) !important;
|
||||
}
|
||||
|
||||
.dxd-landing .dxd-mock-bar .dot.r { background: #ec3750 !important; box-shadow: none !important; }
|
||||
.dxd-landing .dxd-mock-bar .dot.y { background: #fbbf24 !important; box-shadow: none !important; }
|
||||
.dxd-landing .dxd-mock-bar .dot.g { background: #34d399 !important; box-shadow: none !important; }
|
||||
|
||||
.dxd-landing .dxd-feature .icon {
|
||||
background: linear-gradient(145deg, rgba(56, 189, 248, 0.12), rgba(139, 92, 246, 0.10)) !important;
|
||||
color: #38bdf8 !important;
|
||||
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
.dxd-landing .dxd-cta-band {
|
||||
background:
|
||||
radial-gradient(ellipse 70% 80% at 50% 0%, rgba(56, 189, 248, 0.10), transparent 70%),
|
||||
radial-gradient(ellipse 60% 70% at 85% 100%, rgba(139, 92, 246, 0.10), transparent 70%),
|
||||
#111520 !important;
|
||||
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 20px 44px -12px rgba(0, 0, 0, 0.72) !important;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Syntax Highlighting — JetBrains Islands + Omarchy Tokyo Night + Coral
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.chroma { background: #080a10 !important; }
|
||||
.chroma .err { color: #fb7185; background: transparent; }
|
||||
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
|
||||
.chroma .cs, .chroma .cp, .chroma .cpf { color: #596780; font-style: italic; }
|
||||
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
|
||||
.chroma .kr, .chroma .kt { color: #fb7185; }
|
||||
.chroma .o, .chroma .ow { color: #38bdf8; }
|
||||
.chroma .p { color: #94a3b8; }
|
||||
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc,
|
||||
.chroma .sd, .chroma .sh, .chroma .sx { color: #34d399; }
|
||||
.chroma .se, .chroma .ss { color: #2dd4bf; }
|
||||
.chroma .si, .chroma .sa { color: #fbbf24; }
|
||||
.chroma .sr { color: #38bdf8; }
|
||||
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
|
||||
.chroma .mi, .chroma .mo, .chroma .il { color: #fbbf24; }
|
||||
.chroma .n, .chroma .nx, .chroma .nn, .chroma .nv,
|
||||
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #e2e8f0; }
|
||||
.chroma .na, .chroma .nb, .chroma .bp, .chroma .ni,
|
||||
.chroma .nl, .chroma .py { color: #a78bfa; }
|
||||
.chroma .nf { color: #38bdf8; }
|
||||
.chroma .nc, .chroma .ne, .chroma .nd, .chroma .nt { color: #2dd4bf; }
|
||||
.chroma .no { color: #fb923c; }
|
||||
.chroma .go { color: #64748b; }
|
||||
.chroma .gp { color: #94a3b8; }
|
||||
.chroma .gh { color: #38bdf8; font-weight: bold; }
|
||||
.chroma .gu { color: #34d399; }
|
||||
.chroma .gt { color: #fb7185; }
|
||||
.chroma .gd { color: #fda4af; background-color: rgba(236, 55, 80, 0.18); }
|
||||
.chroma .gi { color: #6ee7b7; background-color: rgba(16, 185, 129, 0.18); }
|
||||
|
||||
/* CodeMirror */
|
||||
.CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #fb7185; }
|
||||
.CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom,
|
||||
.CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #fbbf24; }
|
||||
.CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #38bdf8; }
|
||||
.CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #596780; }
|
||||
.CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #34d399; }
|
||||
.CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #2dd4bf; }
|
||||
.CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta,
|
||||
.CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin,
|
||||
.CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #a78bfa; }
|
||||
.CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #fb7185; }
|
||||
.CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #38bdf8; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue