/* ========================================================= Ender AI — Minecraft / End-stone aesthetic Theme via [data-theme="dark|light|colorblind"] on Dyslexic-friendly font via .dyslexic on ========================================================= */ /* ---- Theme variables ---- */ :root { /* Default = dark theme */ --mc-bg: #1d1f24; /* deep slate */ --mc-bg-soft: #252830; --mc-fg: #e8eaf0; --mc-fg-muted: #9aa1ad; --mc-fg-soft: #c9cdd4; --mc-panel: #2a2e36; /* iron-grey panel */ --mc-panel-light: #383d47; --mc-panel-edge-hi: #4a505c; --mc-panel-edge-lo: #15171b; --mc-side: #1a1d22; --mc-side-edge-hi: #353a44; --mc-side-edge-lo: #0a0b0e; --mc-accent: #4ade80; /* emerald = "experience-orb" green */ --mc-accent-strong: #22c55e; --mc-accent-fg: #052e16; --mc-rust: #c45a1f; /* anvil rust streak */ --mc-iron: #4d525c; --mc-iron-dark: #2a2d33; --mc-stone-tile: rgba(255, 255, 255, 0.025); --mc-stone-tile-2: rgba(0, 0, 0, 0.18); --mc-link-hover: var(--mc-accent); /* Hover outline — user-selectable via [data-hover="..."] presets below. */ --mc-hover-outline: var(--mc-accent); /* Text color flashed when clicking buttons / links / cards. Each [data-hover="..."] preset overrides this in the block below. */ --mc-click-text: var(--mc-accent-strong); /* Real Minecraft-style fonts. Stack falls through if the CDN is blocked. */ --mc-font-pixel: 'Minecraft Ten', 'Minecraft', 'Minecraftia', 'Press Start 2P', monospace; --mc-font-body: 'Minecraft', 'Minecraftia', 'Press Start 2P', 'VT323', 'Courier New', system-ui, monospace; --mc-radius: 4px; /* small radii — pixely */ --mc-shadow-bevel-out: inset 2px 2px 0 0 var(--mc-panel-edge-hi), inset -2px -2px 0 0 var(--mc-panel-edge-lo), 0 2px 0 0 rgba(0, 0, 0, 0.35); --mc-shadow-bevel-in: inset -2px -2px 0 0 var(--mc-panel-edge-hi), inset 2px 2px 0 0 var(--mc-panel-edge-lo); } [data-theme="light"] { --mc-bg: #e8e1cf; /* sandstone-ish */ --mc-bg-soft: #f4eedd; --mc-fg: #2a261c; --mc-fg-muted: #6f6857; --mc-fg-soft: #4a4438; --mc-panel: #d8cfb8; --mc-panel-light: #ece4cf; --mc-panel-edge-hi: #fff8e6; --mc-panel-edge-lo: #8c826b; --mc-side: #c8be9f; --mc-side-edge-hi: #efe7ce; --mc-side-edge-lo: #7c7256; --mc-accent: #2f7d46; --mc-accent-strong: #226635; --mc-accent-fg: #f4eedd; --mc-rust: #a13e0d; --mc-iron: #6f6857; --mc-iron-dark: #423d31; --mc-stone-tile: rgba(0, 0, 0, 0.04); --mc-stone-tile-2: rgba(255, 255, 255, 0.45); } /* Colour-blind safe palette (Okabe-Ito-inspired) on dark base. */ [data-theme="colorblind"] { --mc-bg: #14171c; --mc-bg-soft: #1d2128; --mc-fg: #ffffff; --mc-fg-muted: #b8bfca; --mc-fg-soft: #dde1e8; --mc-panel: #232831; --mc-panel-light: #313844; --mc-panel-edge-hi: #4a5160; --mc-panel-edge-lo: #0a0c10; --mc-side: #161a20; --mc-side-edge-hi: #2e333d; --mc-side-edge-lo: #050608; /* Okabe-Ito orange for primary action — high contrast for both deuteranopia + protanopia. */ --mc-accent: #E69F00; --mc-accent-strong: #D55E00; --mc-accent-fg: #1d1500; --mc-rust: #D55E00; --mc-iron: #56B4E9; /* sky blue */ --mc-iron-dark: #0072B2; --mc-stone-tile: rgba(255, 255, 255, 0.04); --mc-stone-tile-2: rgba(0, 0, 0, 0.18); } /* ---- Body / global ---- */ html, body { background: var(--mc-bg) !important; color: var(--mc-fg) !important; font-family: var(--mc-font-body) !important; font-size: 16px; line-height: 1.5; /* Crisp pixel rendering for the bitmap-style Minecraft font. */ -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; font-smooth: never; transition: background-color 200ms; } /* Force the Minecraft font through every element, overriding Tailwind's font-family on form controls, headings, etc. */ *, *::before, *::after, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, span, a, div, label, li { font-family: var(--mc-font-body); } body { background-color: var(--mc-bg) !important; background-attachment: fixed !important; } /* Dyslexic-friendly mode: switch to Lexend (Google Fonts), bump spacing. Wins over the universal Minecraft font rule because of higher specificity. */ body.dyslexic, body.dyslexic *, body.dyslexic *::before, body.dyslexic *::after, body.dyslexic h1, body.dyslexic h2, body.dyslexic h3, body.dyslexic button, body.dyslexic input, body.dyslexic select, body.dyslexic textarea { font-family: 'Lexend', 'Inter', system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; font-smooth: always; } body.dyslexic { letter-spacing: 0.02em; word-spacing: 0.08em; line-height: 1.7; } body.dyslexic h1, body.dyslexic h2, body.dyslexic h3 { letter-spacing: 0.01em; line-height: 1.3; text-shadow: none !important; } /* Make Tailwind defaults inherit our themed colors where it matters. */ .bg-white { background: var(--mc-panel) !important; color: var(--mc-fg); } .bg-slate-50 { background: var(--mc-bg) !important; } .text-slate-500, .text-slate-600, .text-slate-700 { color: var(--mc-fg-muted) !important; } .text-slate-900 { color: var(--mc-fg) !important; } .border-slate-200, .border-slate-300 { border-color: var(--mc-panel-edge-lo) !important; } .divide-y > * + * { border-color: var(--mc-panel-edge-lo) !important; } .hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background: var(--mc-panel-light) !important; } /* Inputs / textareas */ input[type=text], input[type=email], input[type=password], input[name=message], input[name=email], input[name=password], textarea, select { background: var(--mc-bg-soft) !important; color: var(--mc-fg) !important; border: 2px solid var(--mc-panel-edge-lo) !important; border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-bevel-in); transition: border-color 120ms; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mc-accent) !important; } /* Code */ code { background: var(--mc-bg-soft); color: var(--mc-fg); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; } /* ---- Logo / brand ---- */ .mc-logo { font-family: var(--mc-font-pixel); font-weight: 400; letter-spacing: 0.04em; color: var(--mc-fg); text-shadow: 2px 2px 0 var(--mc-panel-edge-lo); } .mc-logo-accent { color: var(--mc-accent); text-shadow: 2px 2px 0 var(--mc-panel-edge-lo); } .mc-tagline { color: var(--mc-fg-muted); text-transform: uppercase; font-family: var(--mc-font-pixel); font-size: 8px !important; } /* ---- Sidebar ---- */ .mc-sidebar { background: var(--mc-side); background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.18) 25%, transparent 25%); background-size: 16px 16px; color: var(--mc-fg); border-inline-end: 3px solid var(--mc-side-edge-lo); box-shadow: inset -1px 0 0 var(--mc-side-edge-hi), inset 1px 0 0 var(--mc-side-edge-hi); } .mc-brand { border-bottom: 2px solid var(--mc-side-edge-lo); box-shadow: inset 0 -1px 0 var(--mc-side-edge-hi); } .mc-side-block { border-top: 2px solid var(--mc-side-edge-lo); box-shadow: inset 0 1px 0 var(--mc-side-edge-hi); } .mc-side-label { color: var(--mc-fg-soft); } .mc-side-muted { color: var(--mc-fg-muted); } /* Sidebar links — beveled "stone button" feel */ .mc-nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: var(--mc-radius); color: var(--mc-fg-soft); border: 2px solid transparent; text-decoration: none; transition: background 100ms, color 100ms; font-weight: 500; } .mc-nav-link:hover { background: var(--mc-panel); color: var(--mc-fg); border-color: var(--mc-panel-edge-lo); box-shadow: var(--mc-shadow-bevel-out); } .mc-nav-link.is-active { background: var(--mc-panel-light); color: var(--mc-accent); border-color: var(--mc-panel-edge-lo); box-shadow: var(--mc-shadow-bevel-in); } .mc-nav-icon { width: 1.25rem; text-align: center; font-size: 1rem; } .mc-logout-btn { color: var(--mc-fg-muted); background: transparent; border: none; cursor: pointer; padding: 2px 6px; } .mc-logout-btn:hover { color: var(--mc-rust); } /* Quota bar — beveled inset track with chunky fill */ .mc-quota-track { width: 100%; height: 8px; background: var(--mc-side-edge-lo); border-radius: 2px; box-shadow: var(--mc-shadow-bevel-in); overflow: hidden; } .mc-quota-fill { height: 100%; background: var(--mc-accent); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.25); transition: width 250ms; } /* ---- Main area ---- */ .mc-main { background: transparent; color: var(--mc-fg); } .mc-main h1, .mc-main h2, .mc-main h3 { color: var(--mc-fg); } /* ---- Beveled buttons (Minecraft GUI style) ---- */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1.1rem; font-family: var(--mc-font-body); font-weight: 600; letter-spacing: 0.03em; background: var(--mc-iron); color: var(--mc-fg); border: 2px solid var(--mc-iron-dark); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-bevel-out); cursor: pointer; text-decoration: none; transition: transform 60ms, box-shadow 60ms, background 60ms; } .mc-btn:hover { background: var(--mc-panel-light); color: var(--mc-fg); } .mc-btn:active { transform: translateY(2px); box-shadow: var(--mc-shadow-bevel-in); } .mc-btn-primary { background: var(--mc-accent); color: var(--mc-accent-fg); border-color: var(--mc-accent-strong); } .mc-btn-primary:hover { background: var(--mc-accent-strong); color: var(--mc-accent-fg); } .mc-btn-danger { background: var(--mc-rust); color: #fff; border-color: #5e2509; } /* Map common Tailwind emerald button utilities to our beveled style. */ .bg-emerald-600, .bg-emerald-700, button.bg-emerald-600, a.bg-emerald-600, .hover\:bg-emerald-700:hover { background: var(--mc-accent) !important; color: var(--mc-accent-fg) !important; border: 2px solid var(--mc-accent-strong) !important; box-shadow: var(--mc-shadow-bevel-out); } .bg-emerald-600:hover, a.bg-emerald-600:hover, button.bg-emerald-600:hover { background: var(--mc-accent-strong) !important; } .text-emerald-400, .text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--mc-accent) !important; } .bg-emerald-100, .bg-emerald-50 { background: color-mix(in srgb, var(--mc-accent) 18%, var(--mc-bg-soft)) !important; color: var(--mc-accent) !important; } .border-emerald-200 { border-color: var(--mc-accent) !important; } .bg-red-100 { background: color-mix(in srgb, var(--mc-rust) 22%, var(--mc-bg-soft)) !important; color: var(--mc-rust) !important; } .bg-red-50 { background: color-mix(in srgb, var(--mc-rust) 12%, var(--mc-bg-soft)) !important; color: var(--mc-rust) !important; } .text-red-600, .text-red-800 { color: var(--mc-rust) !important; } .bg-blue-100 { background: color-mix(in srgb, var(--mc-iron) 30%, var(--mc-bg-soft)) !important; color: var(--mc-iron) !important; } .text-blue-800 { color: var(--mc-iron) !important; } .bg-slate-200, .bg-slate-100 { background: var(--mc-panel-light) !important; color: var(--mc-fg-soft) !important; } .text-slate-700, .text-slate-800 { color: var(--mc-fg-soft) !important; } .text-slate-400 { color: var(--mc-fg-muted) !important; } /* ---- Generic panel (replaces "bg-white border rounded-lg") ---- */ .mc-panel { background: var(--mc-panel); color: var(--mc-fg); border: 2px solid var(--mc-panel-edge-lo); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-bevel-out); } /* Force common Tailwind "card" combo into the beveled MC panel style. */ .bg-white.border, .bg-white.rounded-lg { background: var(--mc-panel) !important; border: 2px solid var(--mc-panel-edge-lo) !important; box-shadow: var(--mc-shadow-bevel-out); } /* ---- Headings — pixel font for h1 ---- */ h1.text-3xl, h1.text-4xl, h1.text-5xl { font-family: var(--mc-font-pixel); font-weight: 400; line-height: 1.4; letter-spacing: 0.02em; text-shadow: 2px 2px 0 var(--mc-panel-edge-lo); } /* Slightly more relaxed for h2/h3 to keep readability */ h2.text-3xl, h2.text-2xl, h3 { font-weight: 700; } /* ---- Public layout ---- */ .mc-public { color: var(--mc-fg); } .mc-public-header { background: var(--mc-panel); border-bottom: 3px solid var(--mc-panel-edge-lo); box-shadow: 0 2px 0 0 rgba(0,0,0,0.35); } .mc-public-link { color: var(--mc-fg-soft); } .mc-public-link:hover { color: var(--mc-accent); } /* ---- Form labels ---- */ label { color: var(--mc-fg-soft); } /* ---- Chat-specific tweaks ---- */ #chat-log { scrollbar-color: var(--mc-iron) var(--mc-bg); } #chat-log::-webkit-scrollbar { width: 10px; } #chat-log::-webkit-scrollbar-track { background: var(--mc-bg); } #chat-log::-webkit-scrollbar-thumb { background: var(--mc-iron); border: 2px solid var(--mc-bg); border-radius: 0; } /* Marked.js usage doc */ #usage-doc { color: var(--mc-fg-soft); } #usage-doc h1, #usage-doc h2, #usage-doc h3 { color: var(--mc-fg); font-family: var(--mc-font-pixel); font-size: 1rem; text-shadow: 2px 2px 0 var(--mc-panel-edge-lo); margin-top: 1.25em; } #usage-doc code, #usage-doc pre { background: var(--mc-bg-soft); color: var(--mc-fg); } #usage-doc a { color: var(--mc-accent); } /* ---- Settings page chunky radio cards ---- */ .mc-choice { display: block; cursor: pointer; } .mc-choice input { position: absolute; opacity: 0; pointer-events: none; } .mc-choice-card { border: 2px solid var(--mc-panel-edge-lo); background: var(--mc-bg-soft); border-radius: var(--mc-radius); padding: 0.85rem 1rem; box-shadow: var(--mc-shadow-bevel-out); transition: background 80ms, border-color 80ms, transform 80ms; } .mc-choice:hover .mc-choice-card { background: var(--mc-panel-light); } .mc-choice input:checked + .mc-choice-card { border-color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 14%, var(--mc-panel)); color: var(--mc-fg); box-shadow: var(--mc-shadow-bevel-in); } /* Theme swatch on theme cards */ .mc-swatch { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--mc-panel-edge-lo); vertical-align: middle; margin-inline-end: 8px; } .mc-swatch-dark { background: linear-gradient(135deg, #1d1f24 0 50%, #2a2e36 50% 100%); } .mc-swatch-light { background: linear-gradient(135deg, #e8e1cf 0 50%, #d8cfb8 50% 100%); } .mc-swatch-colorblind { background: linear-gradient(135deg, #14171c 0 50%, #E69F00 50% 100%); } /* ---- Subtle anvil-strike accent under headings ---- */ h1.text-3xl::after, h1.text-4xl::after, h1.text-5xl::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 10px; background: var(--mc-accent); box-shadow: 4px 0 0 var(--mc-rust), 8px 0 0 var(--mc-iron); } /* ========================================================= BIOME BACKGROUNDS — applied via [data-biome="..."] on . Each one paints body's background-color/image with a distinct biome palette. Theme variables still control panels + text. ========================================================= */ [data-biome="stone"] body { /* default — leave existing stone tile pattern */ } [data-biome="plains"] body { background-color: #4f8b2a !important; background-image: linear-gradient(135deg, rgba(255,255,255,0.06) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.06) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.18) 25%, transparent 25%) !important; background-size: 16px 16px !important; } [data-biome="forest"] body { background-color: #1f4923 !important; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04) 0 4px, transparent 5px), radial-gradient(circle at 70% 70%, rgba(0,0,0,0.30) 0 5px, transparent 6px), linear-gradient(45deg, rgba(0,0,0,0.20) 25%, transparent 25%) !important; background-size: 32px 32px, 32px 32px, 16px 16px !important; } [data-biome="desert"] body { background-color: #d9b25e !important; background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%), linear-gradient(225deg, rgba(255,255,255,0.10) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.14) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.14) 25%, transparent 25%) !important; background-size: 18px 18px !important; } [data-biome="nether"] body { background-color: #3a0c0c !important; background-image: radial-gradient(circle at 25% 40%, rgba(255,90,30,0.18) 0 6px, transparent 8px), radial-gradient(circle at 75% 80%, rgba(255,140,40,0.12) 0 4px, transparent 6px), linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.40) 25%, transparent 25%) !important; background-size: 48px 48px, 48px 48px, 16px 16px, 16px 16px !important; } [data-biome="ocean"] body { background-color: #0f3a73 !important; background-image: linear-gradient(135deg, rgba(255,255,255,0.08) 25%, transparent 25%), linear-gradient(225deg, rgba(0,180,220,0.10) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.20) 25%, transparent 25%), linear-gradient(315deg, rgba(0,0,0,0.20) 25%, transparent 25%) !important; background-size: 20px 20px !important; } [data-biome="jungle"] body { background-color: #2c6a1f !important; background-image: radial-gradient(circle at 20% 20%, rgba(160, 220, 90, 0.12) 0 5px, transparent 7px), radial-gradient(circle at 80% 60%, rgba(0,0,0,0.32) 0 6px, transparent 8px), linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%) !important; background-size: 32px 32px, 36px 36px, 16px 16px !important; } [data-biome="taiga"] body { background-color: #c8d6dc !important; background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.55) 0 4px, transparent 5px), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.45) 0 3px, transparent 4px), linear-gradient(135deg, rgba(120,160,180,0.18) 25%, transparent 25%), linear-gradient(45deg, rgba(70,110,140,0.18) 25%, transparent 25%) !important; background-size: 28px 28px, 28px 28px, 16px 16px, 16px 16px !important; } [data-biome="mushroom"] body { background-color: #5a3858 !important; background-image: radial-gradient(circle at 30% 40%, rgba(255,140,200,0.20) 0 5px, transparent 7px), radial-gradient(circle at 70% 80%, rgba(220,80,150,0.20) 0 4px, transparent 6px), linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) !important; background-size: 36px 36px, 36px 36px, 16px 16px !important; } /* Custom uploaded biome — URL injected as inline --mc-custom-bg on . */ [data-biome="custom"] body { background-color: #000 !important; background-image: var(--mc-custom-bg) !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } [data-biome="end"] body { background-color: #15101e !important; background-image: radial-gradient(circle at 20% 30%, rgba(220, 200, 130, 0.14) 0 4px, transparent 6px), radial-gradient(circle at 70% 70%, rgba(160, 110, 200, 0.14) 0 3px, transparent 5px), linear-gradient(135deg, rgba(255,255,255,0.025) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.45) 25%, transparent 25%) !important; background-size: 40px 40px, 40px 40px, 16px 16px, 16px 16px !important; } /* ---- Biome swatches in the settings page ---- */ .mc-biome-swatch { width: 100%; height: 56px; border: 2px solid var(--mc-panel-edge-lo); background-size: 16px 16px; } .mc-biome-stone { background: #1d1f24; background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.20) 25%, transparent 25%); } .mc-biome-plains { background: #4f8b2a; background-image: linear-gradient(135deg, rgba(255,255,255,0.06) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%); } .mc-biome-forest { background: #1f4923; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04) 0 4px, transparent 5px), linear-gradient(45deg, rgba(0,0,0,0.20) 25%, transparent 25%); } .mc-biome-desert { background: #d9b25e; background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%), linear-gradient(45deg, rgba(0,0,0,0.14) 25%, transparent 25%); } .mc-biome-nether { background: #3a0c0c; background-image: radial-gradient(circle at 50% 50%, rgba(255,90,30,0.30) 0 8px, transparent 12px), linear-gradient(45deg, rgba(0,0,0,0.40) 25%, transparent 25%); } .mc-biome-ocean { background: #0f3a73; background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%), linear-gradient(45deg, rgba(0,180,220,0.10) 25%, transparent 25%); } .mc-biome-jungle { background: #2c6a1f; background-image: radial-gradient(circle at 30% 30%, rgba(160,220,90,0.20) 0 5px, transparent 7px), linear-gradient(45deg, rgba(0,0,0,0.20) 25%, transparent 25%); } .mc-biome-taiga { background: #c8d6dc; background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.65) 0 4px, transparent 5px), linear-gradient(45deg, rgba(70,110,140,0.18) 25%, transparent 25%); } .mc-biome-mushroom { background: #5a3858; background-image: radial-gradient(circle at 40% 40%, rgba(255,140,200,0.30) 0 5px, transparent 7px), linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%); } .mc-biome-end { background: #15101e; background-image: radial-gradient(circle at 30% 30%, rgba(220,200,130,0.22) 0 4px, transparent 6px), linear-gradient(45deg, rgba(0,0,0,0.45) 25%, transparent 25%); } /* ========================================================= HOVER OUTLINE COLOR — picked in /settings/theme. Sets a CSS variable we then apply on every hover state across the UI. ========================================================= */ [data-hover="emerald"] { --mc-hover-outline: #4ade80; --mc-click-text: #22c55e; } [data-hover="red"] { --mc-hover-outline: #ef4444; --mc-click-text: #dc2626; } [data-hover="gold"] { --mc-hover-outline: #fbbf24; --mc-click-text: #f59e0b; } [data-hover="blue"] { --mc-hover-outline: #38bdf8; --mc-click-text: #0284c7; } [data-hover="purple"] { --mc-hover-outline: #a78bfa; --mc-click-text: #7c3aed; } [data-hover="rust"] { --mc-hover-outline: #f97316; --mc-click-text: #ea580c; } [data-hover="iron"] { --mc-hover-outline: #cbd5e1; --mc-click-text: #94a3b8; } /* Apply the hover outline to interactive surfaces. These supplement (not replace) the existing :hover background changes. */ .mc-btn:hover, .mc-nav-link:hover, .mc-choice:hover .mc-choice-card, .mc-choice-upload:hover .mc-biome-add, .mc-panel:hover { border-color: var(--mc-hover-outline) !important; box-shadow: inset 2px 2px 0 0 color-mix(in srgb, var(--mc-hover-outline) 50%, var(--mc-panel-edge-hi)), inset -2px -2px 0 0 var(--mc-panel-edge-lo), 0 2px 0 0 rgba(0,0,0,0.35); } .mc-photo-delete:hover { border-color: var(--mc-hover-outline) !important; } /* Inputs get the hover outline too (only on hover — :focus still uses accent). */ input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[name=message]:hover, textarea:hover, select:hover { border-color: var(--mc-hover-outline) !important; } /* Hover swatches in the settings picker */ .mc-hover-swatch { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--mc-panel-edge-lo); vertical-align: middle; margin-inline-end: 8px; } .mc-hover-swatch-emerald { background: #4ade80; } .mc-hover-swatch-red { background: #ef4444; } .mc-hover-swatch-gold { background: #fbbf24; } .mc-hover-swatch-blue { background: #38bdf8; } .mc-hover-swatch-purple { background: #a78bfa; } .mc-hover-swatch-rust { background: #f97316; } .mc-hover-swatch-iron { background: #cbd5e1; } /* ========================================================= CHAT / FORUM / GROUP message styling Discord-density, hover backdrops, full-bleed shell. ========================================================= */ /* Pull the chat shell flush against the main content area so the chat covers the whole space (per user request). The outer Main has px-8 py-8 already; we use negative margins to undo it for chat pages and let the chat panel fill end-to-end. */ .chat-shell { display: flex; flex-direction: column; height: calc(100vh - 0rem); margin: -2rem; /* undo Main's px-8 py-8 */ padding: 0; } .chat-shell > .chat-header { flex-shrink: 0; padding: 16px 24px; border-bottom: 1px solid var(--mc-side-edge-lo); background: transparent; } .chat-shell > .chat-body { flex: 1; display: flex; min-height: 0; } .chat-shell .chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0; background: transparent; } /* Readability over busy background photos: classic Minecraft drop shadow on every glyph, plus a soft halo. Works on light or dark backdrops. */ .chat-shell .chat-msg, .chat-shell .chat-empty, .chat-shell .chat-header h1, .chat-shell .chat-header p { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.55); } .chat-shell .chat-form { flex-shrink: 0; display: flex; gap: 8px; padding: 10px 16px 14px 16px; border-top: 1px solid var(--mc-panel-edge-lo); background: transparent; } /* Individual message rows. */ .chat-msg { position: relative; padding: 4px 18px 4px 18px; display: flex; flex-direction: column; } .chat-msg:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="light"] .chat-msg:hover { background: rgba(0, 0, 0, 0.04); } .chat-msg .chat-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; } .chat-msg .chat-author { font-weight: 700; color: var(--mc-fg); } .chat-msg .chat-author-admin { color: var(--mc-accent); } .chat-msg .chat-time { font-size: 11px; color: var(--mc-fg-muted); } .chat-msg .chat-content { color: var(--mc-fg-soft); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.4; } .chat-msg .chat-content a { color: var(--mc-accent); } /* Continuation messages from the same author within 5 minutes get tighter spacing + hidden meta — Discord-style grouping. */ .chat-msg.chat-msg-continuation { padding-top: 0; } .chat-msg.chat-msg-continuation .chat-meta { display: none; } /* Mod embed card inside a chat bubble. */ .chat-embed { display: block; margin-top: 6px; max-width: 460px; padding: 10px 12px; background: var(--mc-bg-soft); border: 2px solid var(--mc-panel-edge-lo); border-left: 4px solid var(--mc-accent); border-radius: var(--mc-radius); text-decoration: none; transition: border-color 120ms; } .chat-embed:hover { border-left-color: var(--mc-hover-outline); } .chat-embed-tag { font-size: 10px; color: var(--mc-fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } .chat-embed-title { font-weight: 700; color: var(--mc-fg); margin-top: 2px; } .chat-embed-desc { font-size: 12px; color: var(--mc-fg-muted); margin-top: 4px; line-height: 1.4; } /* Empty-state shown when there are zero messages */ .chat-empty { text-align: center; color: var(--mc-fg-muted); font-size: 13px; padding: 48px 16px; } /* Compose input — full-width with focus halo */ .chat-input { flex: 1; background: var(--mc-bg-soft) !important; color: var(--mc-fg) !important; border: 2px solid var(--mc-panel-edge-lo) !important; border-radius: var(--mc-radius); padding: 10px 14px; font-size: 14px; } .chat-input:focus { border-color: var(--mc-accent) !important; } /* Mic button — sits next to Send. Pulsing red while listening. */ .voice-mic-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--mc-iron); color: var(--mc-fg); border: 2px solid var(--mc-iron-dark); border-radius: var(--mc-radius); cursor: pointer; font-size: 18px; transition: background 100ms; } .voice-mic-btn:hover { background: var(--mc-panel-light); } .voice-mic-btn.voice-listening { background: var(--mc-rust) !important; color: #fff !important; border-color: #5e2509 !important; animation: voice-mic-pulse 1.2s ease-in-out infinite; } @keyframes voice-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 50, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(244, 114, 50, 0); } } /* Hourglass animation shown while waiting for Ender (or any LLM call). */ @keyframes hourglass-flip { 0%, 40% { transform: rotate(0deg); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .hourglass-tick { display: inline-block; animation: hourglass-flip 1.6s ease-in-out infinite; font-size: 1.1em; line-height: 1; } .chat-pending .chat-input { opacity: 0.5; pointer-events: none; } /* Speaker button on chat messages. Hidden until message hover. */ .voice-speak-btn { position: absolute; top: 4px; right: 12px; width: 24px; height: 24px; background: transparent; color: var(--mc-fg-muted); border: none; cursor: pointer; font-size: 14px; opacity: 0; transition: opacity 120ms, color 120ms; } .chat-msg:hover .voice-speak-btn { opacity: 1; } .voice-speak-btn:hover { color: var(--mc-accent); } /* ========================================================= CLICK COLOR — text turns the user's chosen color while actively pressed AND for 250ms after click completes (via .mc-just-clicked added by a global JS handler). ========================================================= */ .mc-btn:active, .mc-nav-link:active, .mc-choice:active .mc-choice-card, a:active, button:active { color: var(--mc-click-text) !important; } /* Lingering flash applied via JS after every click. */ .mc-just-clicked, .mc-just-clicked * { color: var(--mc-click-text) !important; transition: color 220ms; } /* Don't override the deliberate emerald/rust/iron tint on dedicated buttons — only flash plain text/link surfaces. mc-btn-primary keeps its bg color but we let the foreground text recolor briefly. */ .mc-btn-primary.mc-just-clicked { /* Keep button bg/border, only the text color flashes. */ color: var(--mc-click-text) !important; } /* User photo as the swatch — fits the same size as built-in swatches. */ .mc-biome-photo { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #000; } /* "+" upload tile — dashed border, centered plus sign. */ .mc-biome-add { display: flex !important; align-items: center; justify-content: center; font-family: var(--mc-font-pixel); font-size: 36px; line-height: 1; color: var(--mc-fg-muted); background: var(--mc-bg-soft) !important; border: 2px dashed var(--mc-panel-edge-hi) !important; } .mc-choice-upload { cursor: pointer; } .mc-choice-upload:hover .mc-choice-card { background: var(--mc-panel-light); } .mc-choice-upload:hover .mc-biome-add { color: var(--mc-accent); border-color: var(--mc-accent) !important; } /* Photo cards need to anchor the absolutely-positioned × button. */ .mc-choice-photo { position: relative; } .mc-photo-delete { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: var(--mc-rust); color: #fff; border: 2px solid var(--mc-panel-edge-lo); border-radius: 3px; font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; font-weight: bold; padding: 0; font-family: var(--mc-font-body); display: flex; align-items: center; justify-content: center; } .mc-photo-delete:hover { background: #8d3008; transform: scale(1.1); } [dir="rtl"] .mc-photo-delete { right: auto; left: 4px; } /* ---- Mobile responsive --------------------------------------------- * * Below 768px: * - Sidebar slides off-screen by default * - A hamburger button (top-left fixed) toggles `body.mc-nav-open` * - Drawer slides in + scrim dims the main content * * Below 480px: * - Compact spacing, smaller font, single-column grids */ .mc-burger { display: none; position: fixed; top: 10px; left: 10px; z-index: 60; width: 44px; height: 44px; border: 2px solid var(--mc-side-edge-lo); border-radius: 4px; background: var(--mc-side); color: var(--mc-fg); font-size: 22px; cursor: pointer; box-shadow: var(--mc-shadow-bevel); } .mc-burger:active { transform: translateY(1px); } .mc-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 40; } @media (max-width: 767px) { .mc-burger { display: flex; align-items: center; justify-content: center; } .mc-app .mc-sidebar { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform 200ms ease-out; box-shadow: 4px 0 16px rgba(0,0,0,0.5); } body.mc-nav-open .mc-sidebar { transform: translateX(0); } body.mc-nav-open .mc-scrim { display: block; } /* Push the main content to start below the burger so it doesn't get hidden */ .mc-app .mc-main { padding-top: 60px; } .mc-app .mc-main > div { padding-left: 16px; padding-right: 16px; } /* Stack any side-by-side grids — Tailwind's grid-cols-2/3/4 etc. force N columns even on small screens; we override that for the panels we control with `.mc-panel` wrappers. */ .mc-panel .grid.grid-cols-2, .mc-panel .grid.grid-cols-3, .mc-panel .grid.grid-cols-4 { grid-template-columns: 1fr; } /* Chat shells were full-bleed already; just shrink padding on phones. */ .chat-shell { padding-left: 8px; padding-right: 8px; } .chat-form input[name="message"] { font-size: 16px; } /* prevent iOS zoom */ /* Public layout (logged out) — compress hero text */ .mc-public h1 { font-size: 1.8rem; line-height: 1.15; } .mc-public-header nav { flex-wrap: wrap; gap: 8px; } /* Dashboard / explore / forum grids that use `sm:grid-cols-2` will already collapse on phones; this catches the rest. */ body[data-theme] [class*="grid-cols-"] { grid-template-columns: minmax(0, 1fr); } body[data-theme] [class*="sm:grid-cols-"][class*="grid-cols-"] { /* Trust sm: media-query for >=640 */ } /* Make tap targets at least 44×44 px */ .mc-btn { min-height: 40px; } .mc-nav-link { min-height: 44px; } /* Tables wrap or scroll on phones — admin cache table etc. */ table { font-size: 12px; } } @media (max-width: 479px) { .mc-app .mc-main > div { padding: 8px 12px; } h1 { font-size: 1.4rem !important; } h2 { font-size: 1.2rem !important; } .mc-panel { padding: 12px !important; } /* Quick-ask + cost preview pills shrink */ #cost-pill { font-size: 11px; } }